手把手教你设置常用字体属性

---

一、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 ‘微软雅黑’;

学习内容：

1、 font-family 用法 2、 font-size用法 3、font-weight用法 4、 font-style 用法 5、font 复合属性写法

---