最详细的CSS字体样式总结包含自定义文字样式（font-family、font-size、font-weight、font-style等）

---

前言

由于自己在学习CSS的过程中会时不时忘记一些CSS字体样式的书写，因此在本文记录了一些常用的CSS字体样式的写法。

---

一、字体系列

（1）使用font-family属性设置文本的字体系列。在使用的时候，如果字体系列的名称超过一个字，则必须用引号，例如：

font-family:"微软雅黑";

同时由于存在某些浏览器不支持某种字体的情况，因此该属性在使用时应该多设置几个字体名称作为一种备用，如果浏览器不支持第一种字体，则会尝试使用下一个字体，以此类推，例如：

font-famliy:"宋体","微软雅黑";

注意：
（1）上述的微软雅黑也可以用英文"Microsoft Yahei"来替代，一般用采用英文写法。
（2）尽量使用系统默认的自带字体，保证在任何浏览器中都可以正确显示。常见的字体有：“Microsoft Yahei”，tahoma，arial，“Hiragino Sans GB”。

（2）如果想要自定义文字样式，可以使用**@font-face自定义设置文字样式，再在元素上添加font-family**属性即可，用法如下：

@font-face {
  font-family: myFont;
  /* 字体文件路径 */
  src: url("自定义文字样式文件的路径");
}
#text {
  color: #ffa5cb;
  font-size: 25px;
  font-family: myFont;
}

二、字体大小

分类：

• 相对大小：相对于周围元素设置大小，允许用户在浏览器中改变文字大小。
• 绝对大小：设置一个指定大小的文本，不允许用户在所有浏览器中改变文字大小。

使用font-size属性定义字体大小，最常用的单位是px(像素)，例如：

font-size:6px;

注意：
（1）谷歌浏览器默认的文字大小是16px。
（2）为避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 代替px，例如：

font-size:2.5em;

又1em=16px，因此可通过px/16=em这个公式将像素转换为em。
（3）通常用百分比设置body的默认字体大小，例如：

font-size:100%;

三、字体粗细

使用font-weight属性设置文本的字体粗细，其参数包括如下：

• normal：默认值，定义标准字符，相当于number为400，声明此值时将取消之前任何设置。
• bold：粗体，相当于number为700
• bolder：IE5+ 特粗体
• lighter：IE5+ 细体
• number：IE5+ 100|200|300|400|500|600|700|800|900（没有单位）

例如：

font-weight:normal;
font-weight:400;

上边两种写法等价。

注意：
（1）实际开发中，常用数字来进行文字的加粗和变细。
（2）font-weight属性还有一个属性值inherit，表示规定字体粗细从父元素继承。

四、字体样式

使用font-style属性设置文本的字体样式，其参数包括如下：

• normal：默认值，标准的字体样式。
• italic：斜体的字体样式。
• oblique：倾斜的字体样式。
• inherit：继承父元素的字体样式。

例如：

font-style:normal;

注意：
针对em或i标签，可以用font-style:normal;使其不倾斜字体。

五、字体复合属性写法

使用font简写属性在一个声明中设置所有字体属性，属性设置顺序如下：

font:font-style font-weight font-size/line-height font-family;

例如：

font:italic 700 16px "宋体";
font:16px "宋体";

注意：
（1）font-size属性和font-family属性是必须的，如果缺少其他值则将会自动使用默认值。
（2）line-height属性用来设置行高。

---

总结

以上就是有关常用字体样式的笔记内容，希望对各位有所帮助，作者也在学习中，如有解释不清楚或有误的地方，还请各位指正。