一、CSS常见设置字体属性
css设置字体常用属性:
1.定义文本字体:font-family
2.定义文本大小:font-size
3.设置字体粗细: font-weight
4.设置文本的风格:font-style
二、使用方法
1.font-family
(设置字体为微软雅黑,推荐用英文写法,兼容性更好)代码如下(示例):
h1 {
font-family:'Microsoft Yahei';
}
注意:
①各种字体之间必须使用英文状态下的逗号隔开,多个字体会依次查找,若没有则往后找
如: p {
font-family: ‘Times New Roman’, Times, serif;
}
② 一般情况下,如果有空格隔开的多个单词组成的字体,加引号。
③尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
2.font-size
代码如下(示例):
.red {
font-size: 20px;
}
注意:
①px(像素)大小是我们网页的最常用的单位
②谷歌浏览器默认的文字大小为16px
③不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小
④可以给body指定整个页面的大小,但标题标签比较特殊,需要单独指定文字大小
3.font-weight
代码如下(示例):
.bold {
font-weight: 700;
}
注意:
①700后面不跟单位,等价于bold(定义粗体)字体加粗的效果,而且实际开发中,我们更提倡使用数字,表示加粗或变细
②若要使标题变细,可以将值设为 normal(默认值,不加粗的)或400
4.font-style
p {
font-style: normal;
}
注意:
①normal:默认值,浏览器会显示标准的字体样式;
italic: 浏览器会显示斜体的字体样式;
②一般用来将倾斜的字体不倾斜,如将em标签变得不倾斜;
总结
如果你觉得一个一个设置非常的麻烦,可以使用下面这种方法。
font 复合属性写法
默认font: font-style font-weight font-size/line-height font-family;
注意:
①顺序不能改变;所以应用时可以写成:font: italic 700 16px ‘微软雅黑’;
②各个属性之间用用空格隔开;
③不需要设置的属性可以省略(取默认值),但必须保留 font-size 和 font-family属性,否则 font 属性将不起作用,如 font: 16px ‘微软雅黑’;