CSS基础03-CSS字体属性

yangjiao

发布于 2021-03-04 02:48:57

2K00

代码可运行

文章被收录于专栏：-csdn迁移-csdn迁移

运行总次数：0

代码可运行

03-CSS字体属性

CSS Fonts（字体）属性用于定义字体系列、大小、粗细、文字样式（如斜体等）。

3.1字体系列

CSS使用font-family属性定义文本的字体系列。

<style>
	p {
		font-family: Arial, 'Microsoft Yahei', '微软雅黑';
	}
</style>

各种字体之间必须使用英文逗号相隔
一般情况下，如果使用了由空格隔开的多个单词组成的字体，需要加单引号
尽量使用系统默认自带的字体，保证任何浏览器都能正确显示
常见的集中字体：‘Microsoft Yahei’, Tahoma, Arial, ‘Hiragino Sans GB’
当设置了多个字体时，根据先后顺序依次查看系统是否支持，若不支持则查看后一个，若全都不支持则使用系统默认的字体显示
实际开发中，字体设置常用于<body>标签来将整个页面中的字体全部修改掉

3.2字体大小

CSS使用 font-size属性设置字体大小

<style>
	p {
		font-size: 20px;
	}
</style>

px（像素）是我们网页中最长使用的单位
谷歌浏览器默认的文字大小为16px
不同浏览器可能默认显示的字号不一致，我们应尽量给一个明确值，而不要使用默认大小
同样可以通过给<body>设置字号大小来指定整个页面文字的大小（标题标签除外，需要单独设定）

3.3字体粗细

CSS使用 font-weight属性来设置字体粗细，属性值有normal(正常字体，相当于number为400，可以用于取消标题等标签的加粗效果)、bold（粗体相当于number为700，也相当于<strong>和<b>的效果）、bolder（特粗体）、lighter（细体）、number（直接使用数字，不要加单位，相对于单词属性值，数字属性值更推荐使用）

3.4文字样式

CSS使用 font-style属性设置文字样式，属性值有normal（默认值，多用于取消<em>和<i>标签的斜体），italic（斜体）

注意：我们很少用于给文字加斜体，反而多用于使用normal来取消斜体

3.5字体复合属性

字体属性可以把以上的样式综合来写，更节约代码

<style>    
	p {
        /* font: font-style font-weight font-size/line-height font-family*/
        font: italic 700 16px/18px 'Microsoft Yahei';
    }
</style>