CSS Handbook · 文字与排印

第四章 / 4.1 字体属性

第四章 · 4.1 节

字体属性

文字是网页最基本的内容载体，字体相关属性决定了"字看起来是什么样"。本节讲字体族、字号、字重等基础属性，下一节再讲行高、对齐等更偏"排版"的文本属性。

font-family 字体族

font-family 接受一个由具体字体名到通用族名组成的"回退列表"，浏览器会按顺序寻找第一个本地可用的字体。

body {
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
}
通用族特征
serif衬线体，笔画末端有装饰，正文阅读感更传统
sans-serif无衬线体，笔画简洁，界面 UI 最常用
monospace等宽字体，字符宽度一致，代码展示专用
cursive / fantasy手写体 / 装饰性字体，谨慎用于正文
字体族对比

serif — The quick brown fox

sans-serif — The quick brown fox

monospace — The quick brown fox

提示回退列表末尾务必写通用族名（如 sans-serif）兜底，否则当所有具体字体都不可用时，浏览器行为将不可预期。

font-size 与 font-weight

font-weight 常用数值 100–900，也可以用 normal（400）、bold（700）等关键字，但具体能渲染出几档粗细取决于字体文件本身是否提供对应字重。

h1 { font-size: 2rem; font-weight: 700; }
p  { font-size: 1rem; font-weight: 400; }
font-weight 对比
300 Light 400 Regular 600 Semibold 700 Bold

font-style 与 font-variant

属性常用取值作用
font-stylenormal / italic / oblique斜体，italic 依赖字体自带斜体字形，oblique 是算法倾斜
font-variantnormal / small-capssmall-caps 将小写字母显示为小型大写字母

font 简写

font 简写可以一次性设置多个字体相关属性，但顺序固定，且 font-size 与 font-family 是必填项。

/* font: style variant weight size/line-height family; */
.title {
  font: italic 700 1.5rem/1.4 Georgia, serif;
}
注意使用 font 简写会把未显式列出的相关属性重置为初始值（如 font-variant、font-stretch），如果之前单独设置过这些属性，可能被意外覆盖。

@font-face 自定义字体

当需要引入设计稿指定的品牌字体、或系统默认不具备的字体时，用 @font-face 声明字体资源，再通过 font-family 引用。

@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans.woff2") format("woff2");
  font-weight: 400 700; /* 可变字体的字重范围 */
  font-display: swap; /* 字体加载完成前先用后备字体显示，避免文字不可见 */
}
body { font-family: "Brand Sans", sans-serif; }
提示woff2 是当前压缩率与浏览器支持度最好的 Web 字体格式，配合 font-display: swap 能显著改善"文字闪烁不可见"（FOIT）的体验问题。

常见误区

  • 只写具体字体名不写通用族兜底，导致特殊环境下文字渲染异常。
  • 设置了字体本身没有的 font-weight 数值，浏览器会用"伪粗体"（软件模拟加粗）渲染，视觉观感变差，应确认字体文件实际提供的字重档位。
  • 用 font 简写却忘记它会重置未列出的属性。