字体，以及 font-family

丢掉对字体的错误认知

字体是有版权的，大部分字体在商用时，需要向字体厂商购买授权。比如使用微软雅黑需要向北京北大方正电子有限公司购买授权，使用 Helvetica 需要向蒙纳（Monotype）公司购买授权。
如果没有向用户提供字体文件（如 Web font 或者内嵌到 App 中），而仅仅是在 CSS 中指定字体名称，不需要购买授权，因为其只是一段声明，表示期望浏览器优先使用某种字体渲染文本（实际调用时涉及到浏览器的字体匹配算法）。而如果在PDF、图片、视频中使用字体，需要购买授权（其中 SVG 是特例。另外，在 three.js 中加载商用字体需要授权），因为本质上它们使用了字体的字形信息。
在 Linux 服务器上，可以免费商用的中文字体主要有思源黑体、思源宋体。尊重版权，不建议将 Windows 平台字体复制到 Linux 平台使用。
不同平台，预置的字体并不相同。比如就个人电脑而言，微软雅黑仅 Windows 系统内置，而苹方也只有 macOS 系统内置。Android 和 iOS 系统内置的字体各不相同，Kindle 也是如此，甚至不同版本的 Microsoft Office 包含的字体都不尽相同。这要求在计算机中使用字体时，需要考虑 Fallback。
常见的“宋体”、“黑体”、“楷体”并不是具体的字体名，它们是一类中文字体的总称。比如 Windows 中的宋体，即中易宋体（SimSun），由北京中易中标电子信息技术有限公司设计制作；而 macOS 中的宋体简/繁（Songti SC/TC）字体，出自常州华文印刷有限公司。

字体基本概念

字符（Character）：字母、数字、汉字、符号等，是一种抽象实体。

字形（Glyph）：单个「字符」的具体表达，一个字可有多个不同的字形。原则上 Unicode 中只对字，而非字形编码。

字型（Font）：印刷行业中，指某一整套具有同样样式和尺码的字形，如一整套中易宋体 5 号字、一整套 9 磅 Helvetica 粗体字。

字体（Typeface）：若干个「字型」在若干个尺寸上的集合。

「书体」- 宋体、仿宋体、黑体等。例如 Windows 自带的「宋体」实为「中易宋体」。

随着计算机字体 (computer font) 的普及，可缩放的矢量字体的出现使得「字型」与「字体」的界限逐渐模糊，现今这两个概念在数字排印领域越来越多地被当做同义词使用。

——摘录自顾轶灵《字体漫谈》Slide

CSS 中的 font-family 属性

font-family: <family-name> | <generic-family>

<family-name> 即字体族名称，名称取决于字体文件定义，如 "Helvetica"、"微软雅黑"。对于中文字体，为了兼容性推荐使用英文字体族名称，如微软雅黑，应使用 "Microsoft YaHei"，如果字体族名称中包含空格，需要加上引号（CSS 中单引号、双引号都可以使用）。
<generic-family> 即通用字体族，名称为规范中定义的一些关键词，如 "serif"、"sans-serif"（实际使用时不包含引号）。

family-name 字体族

实际上浏览器在渲染字体时，会查找字体中的字体族（Font Family）英文/中文名称、PostScript 名称、全名（Full Font Name）等信息。不同操作系统，不同浏览器处理方式不完全相同。比如，同样使用 Chrome 浏览器，Windows 支持写 "方正书宋_GBK"，而 macOS 只支持写 "FZShuSong-Z01"。另外，虽然浏览器支持直接书写字体的全名，但字体全名中会包含字体粗细、斜体（italic）、长体（condensed）等具体属性，一般不建议这么做，字体的风格应该在 CSS 中通过 font-weight、font-style、font-stretch 等属性指定，由浏览器决定实际渲染的字体。

以下是一些字体的信息示例（系列即字体族）：

字体文件名称      FZHTJW.ttf
PostScript 名称  FZHTJW--GB1-0
全名             方正黑体简体/FZHei-B01S
系列             方正黑体简体/FZHei-B01S
样式             常规体/Regular

字体文件名称      FZSS_GBK.ttf
PostScript 名称  FZSSK--GBK1-0
全名             方正书宋_GBK/FZShuSong-Z01
系列             方正书宋_GBK/FZShuSong-Z01
样式             Regular

字体文件名称      FZSSJW.ttf
PostScript 名称  FZSSJW--GB1-0
全名             方正书宋简体/FZShuSong-Z01S
系列             方正书宋简体/FZShuSong-Z01S
样式             Regular

字体文件名称      UbuntuMono-R.ttf
PostScript 名称  UbuntuMono-Regular
全名             Ubuntu Mono
系列             Ubuntu Mono
样式             Regular

字体文件名称      SourceHanSansSC-Regular.otf
PostScript 名称  SourceHanSansSC-Regular
全名             思源黑体 Regular/Source Han Sans SC Regular
系列             思源黑体/Source Han Sans SC
样式             Regular

字体文件名称      NotoSansCJKsc-Regular.otf
PostScript 名称  NotoSansCJKsc-Regular
全名             Noto Sans CJK SC Regular
系列             Noto Sans CJK SC
样式             Regular

generic-family 通用字体族

在 CSS Fonts Module Level 3 中定义了 5 个通用字体族，包括："serif"，"sans-serif"，"cursive"，"fantasy"，"monospace"。

serif 衬线字体，如 Times/Times New Roman, Georgia, 中易宋体, 新宋体, 华文中宋, 方正宋体
sans-serif 无衬线字体，如 Helvetica, Arial, Verdana, 微软雅黑, 中易黑体, 方正黑体, 华文细黑, 苹方
cursive 手写体，如 Corsiva, Zapfino，中易楷体, 华文楷体, 方正楷体, 华文行楷
fantasy: “幻想体”，艺术字体、美术字体，如 Comic Sans MS, Webdings, Wingdings
monospace 等宽字体，如 Courier, Consolas, DejaVu Sans Mono, Menlo, Source Code Pro, SF Mono

在新的 CSS Fonts Module Level 4 草案中，还加入了以下几个新的通用字体族：

system-ui 使用平台默认的 UI 字体
emoji 用于 Emoji 表情
math 用于数学表达式
fangsong 仿宋体，如中易仿宋、方正仿宋

中文字体如何选择对应的通用字体族？

常用的中文字体主要包括“宋黑楷仿”四类，即宋体、黑体、楷体、仿宋体。

宋体（Song）：对应 serif
黑体（Hei）：对应 sans-serif
楷体（Kai）：对应 cursive
仿宋体（Fang Song）：对应 fangsong

在使用上，中文楷体/仿宋更接近于西文的斜体（italic）概念，用于与正文做区分。

以 Chrome 浏览器的默认的 UA 样式为例。

对于西文而言，默认是以下 CSS：

i, cite, em, var, address, dfn {
    font-style: italic;
}

对于中文，可能需要覆盖为：

i, cite, em, var, address, dfn {
    font-style: normal;
    font-family: 'FZZFangSong-Z02', 'FZZFangSong-Z02S', STFangsong, FangSong, serif;
}

中文字体 font-family 示例

其中涉及到部分方正字库旗下的字体，它们没有被包含在主流操作系统中。

/* 宋体 */
.song {
  font-family: 'Source Han Serif SC', 'Noto Serif CJK SC',
   'FZNewShuSong-Z10S', FZGFShuSong, 'FZShuSong-Z01', 'FZShuSong-Z01S',
   'Songti SC', STSong, NSimSun, SimSun, serif;
}

/* 黑体 */
.hei {
  font-family: 'Source Han Sans SC', 'Noto Sans CJK SC',
   'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
   'FZHei-B01', 'FZHei-B01S', 'Heiti SC', STHeiti, SimHei, sans-serif;
}

/* 楷体 */
.kai {
  font-family: 'FZKai-Z03', 'FZKai-Z03S', 'Kaiti SC', STKaiti, KaiTi, cursive;
}

/* 仿宋 */
.fang-song {
  font-family: 'FZZFangSong-Z02', 'FZZFangSong-Z02S',
   STFangsong, FangSong, fangsong;
}