CSS 字体样式

为什么先聊字体

打开一个网页，最先感受到的往往不是布局，而是文字长什么样。字体选得好，页面立刻专业起来，所以文本篇从字体开始。这一篇把 font-family、font-size、font-weight 这些基础属性一次讲透。

font-family 字体栈

font-family 指定元素用什么字体，可以写一串，用英文逗号隔开，浏览器从左到右逐个尝试，哪个能用就用哪个。这串候选名单就叫字体栈。

body {
  /* 依次尝试，本机有的字体优先命中 */
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
}

上面这行在 Mac 上会命中苹方，在 Windows 上会命中微软雅黑。如果用户机器上都没有这些字体，最后会落到 sans-serif 兜底。通用的字体族一共五个，见下表。

字体栈最后一定要放一个通用字体族，不然遇到没有的字体，浏览器会退回默认字体，效果不可控。

中文字体名要加引号，比如 “微软雅黑”、”宋体”。多个英文单词的字体名同样要加引号，比如 “Times New Roman”。单个英文词可以不引，不过为了统一，建议都加上。

font-size 字号

浏览器默认字号是 16px。字号单位主要有 px、em、rem 三种，区别在于参照物。

html {
  font-size: 16px;
}
.box {
  font-size: 1.25em;   /* 父元素 16px 时，这里就是 20px */
}
.box2 {
  font-size: 1.25rem;  /* 始终是根元素 16px 的 1.25 倍，20px */
}

em 的坑在于嵌套，子元素继承的父字号可能已经变过，1em 到底是多大越来越难算。想全局统一缩放，rem 是最优解，比如做移动端适配时改 html 的 font-size，全站字号跟着变。日常开发建议 body 用 16px 起步，正文 14 到 16px，标题适当加大即可。

font-weight 字重

字重指文字的粗细。normal 等于 400，bold 等于 700，这是最常用的两个。lighter 和 bolder 是相对父级加减一档。数值写法支持 100 到 900 共九档。

h1 {
  font-weight: 700;
}
em {
  font-weight: lighter;
}

但要注意，普通中文字体通常只有 400 和 700 两个档位，写 500 或 600，浏览器会取最接近的实际档位，并不会真的多出一档粗细。想用更丰富的字重，只能选择支持多字重的字体。

font-style 斜体

normal 常规，italic 斜体，oblique 倾斜。区别简单说，italic 用的是字体自带的斜体设计，oblique 是程序强行把正体扭个角度。实际项目里写 italic 就够用了。

网络字体

系统字体看腻了，可以用网络字体。以 Google Fonts 为例，先在页面 head 里用 link 引入字体样式表。

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

然后在 CSS 里正常用这个字体名。

body {
  font-family: "Roboto", sans-serif;
}

另一种方式是 @font-face，把字体文件放在自己的服务器上，自己声明。

@font-face {
  font-family: "myfont";
  src: url("fonts/myfont.woff2") format("woff2");
}

注意 @font-face 里的 font-family 只是自定义名字，叫什么都可以，关键是 src 指向的字体文件要存在。字体格式优先选 woff2，体积小加载快。中文字体动辄几兆，网络字体建议按需加载，别让整站变慢。

小结

字体这块记住五句话，字体栈最后放通用字体族，中文字体名加引号，rem 适合全局缩放，普通字体字重只有两档，网络字体用 woff2。这些取值大多是属性关键字，相关规则可以回看CSS 属性关键字。下一篇我们聊文字本身的外观，颜色、对齐和行高。