CSS Fonts(字体)

字体属性决定页面文字的"长相"：用哪种字体、字号多大、是粗是斜。CSS 字体相关属性围绕 font 家族展开，包括 font-family、font-size、font-weight、font-style 等。合理搭配字体，页面信息才能层次分明、阅读舒适。

字体族 font-family

font-family 设置字体，可以写多个备选字体，浏览器从左到右查找第一个系统里存在的：

body {
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}
h1 { font-family: Georgia, serif; }

<h1>标题用衬线字体</h1>
<p>正文优先微软雅黑，其次苹方，都没有就用系统无衬线体。</p>

效果说明：字体名含空格时须加引号；末尾的 serif/sans-serif/monospace 通用字族负责兜底。

字号 font-size

font-size 设置文字大小，常用单位有像素 px 与相对单位 rem：

p   { font-size: 16px; }   /* 固定像素 */
.big { font-size: 1.5rem; } /* 根元素字号的 1.5 倍 */

效果说明：1rem 默认等于根元素(html) 的 16px；rem 相对根元素、em 相对父元素，rem 更利于整站统一缩放。

字体粗细 font-weight

font-weight 控制粗细，用关键字或 100~900 的数字：

strong { font-weight: bold; }   /* 加粗 */
.light { font-weight: 300; }    /* 细体 */
.thick { font-weight: 900; }    /* 极粗 */

效果说明：normal 对应 400、bold 对应 700；数值字重需要字体本身支持，否则浏览器就近取最接近的字重渲染。

字体风格 font-style

font-style 主要用来设置斜体，取值为 normal、italic、oblique：

em { font-style: italic; }  /* 斜体，常用于强调 */
.no { font-style: normal; } /* 恢复正常 */

<em>这是斜体强调文字</em>

效果说明：italic 使用字体的斜体版本，oblique 是程序化倾斜，日常用 italic 即可。

字体简写 font

font 是综合简写属性，可一次设置风格、粗细、字号/行高、字体族：

p {
    font: italic bold 16px/1.6 "Microsoft YaHei", sans-serif;
}

效果说明：简写顺序固定为 style weight size/line-height family，其中 size 和 family 必填，其余省略时取默认值。

易错点与建议

• 正文建议 14~16px，过小影响阅读；中文字号常用 12/14/16px 几个档位。
• 中文网站优先声明中文字体（雅黑、苹方、宋体），并保留通用字族兜底。
• 少用花哨的网页字体文件，会拖慢加载；确需时用 @font-face 按需引入。

小结

字体属性是文字排版的"门面"：font-family 决定字体、font-size 控制大小、font-weight 与 font-style 调整粗细和斜体。字体列表带好备选与通用字族，文字在任何设备上都能得体显示。