3、Web安全字体：什么是Web安全字体、常见Web安全字体列表、fallback机制、字体栈书写规范
说到字体适配，很多同学第一个想到的就是「Web安全字体」。这玩意儿到底安不安全？其实跟黑客攻击没啥关系。它指的是那些几乎在所有操作系统上都预装了的字体，你用了它，用户大概率能看到你设计的样子。
我刚开始做前端那会儿，特别喜欢用一些花哨的字体。结果呢？设计稿美如画，上线后用户那边全变成了宋体。嗯，那场面，别提多尴尬了。从那以后，我才老老实实研究起Web安全字体来。
什么是Web安全字体
说白了，Web安全字体就是一组「保险字体」。它们被Windows、macOS、Linux、iOS、Android等主流系统预装，你不需要额外加载任何字体文件，浏览器就能直接渲染。
举个例子。你在CSS里写了 font-family: 'PingFang SC'，Mac用户看着很舒服。但Windows用户没有这个字体，浏览器就会用默认的宋体或微软雅黑替代。如果你提前在字体栈里备好了安全字体，就能控制这个「降级」的过程。
核心判断标准：一个字体如果在超过90%的主流操作系统上都有预装，就可以称为Web安全字体。
常见Web安全字体列表
我整理了一份常用列表。这些字体我几乎在每个项目里都会用到，你直接拿去用就行。
| 字体名称 | 适用场景 | 预装系统 |
|---|---|---|
| Arial | 正文、无衬线 | Windows、macOS、Linux |
| Helvetica | 正文、无衬线（更精致） | macOS、iOS |
| Times New Roman | 衬线字体、长文阅读 | Windows、macOS、Linux |
| Georgia | 衬线字体、屏幕阅读 | Windows、macOS、Linux |
| Verdana | 小字号正文、高可读性 | Windows、macOS、Linux |
| Trebuchet MS | 标题、中等粗细 | Windows、macOS |
| Courier New | 等宽字体、代码展示 | Windows、macOS、Linux |
| 微软雅黑 | 中文正文（Windows） | Windows |
| PingFang SC | 中文正文（macOS/iOS） | macOS、iOS |
| Noto Sans CJK | 中文正文（跨平台） | Android、Linux |
我的习惯：英文优先用 Arial, Helvetica, sans-serif，中文优先用 'PingFang SC', 'Microsoft YaHei', sans-serif。这样在Mac和Windows上都能有不错的体验。
Fallback机制：浏览器是怎么选字体的？
你写了一个字体栈，浏览器到底怎么选？我画了张图，一看就明白。
流程其实很简单。浏览器拿到你的字体栈后，从左到右挨个检查。第一个字体系统里有，就用它。没有？跳过，看第二个。一直到最后，如果都没找到，就用通用字体族（serif、sans-serif、monospace）来兜底。
我曾经踩过的坑：有一次我只写了 font-family: 'PingFang SC'，没加任何fallback。结果Windows用户打开页面，所有中文都变成了宋体。因为PingFang SC在Windows上不存在，浏览器直接用了系统默认的宋体。嗯，从那以后我再也不敢偷懒了。
字体栈书写规范
字体栈怎么写才算专业？我总结了几个原则，都是实战里摸爬滚打出来的。
1. 从最具体到最通用
把最想要的字体写在最前面，然后是备选，最后是通用字体族。浏览器按顺序尝试，所以优先级从左到右递减。
/* 正确写法 */
font-family: 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
/* 错误写法：把通用字体族写在前面 */
font-family: sans-serif, 'PingFang SC', 'Microsoft YaHei';2. 中英文分开处理
中文字体通常也包含英文字形，但效果一般。我习惯先指定英文字体，再指定中文字体。
/* 英文优先，中文兜底 */
font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;3. 带空格的字体名加引号
字体名里有空格，比如 Times New Roman，必须用引号包起来。单个单词的字体名可以不加，但我个人习惯统一加单引号，看着整齐。
/* 推荐写法 */
font-family: 'Georgia', 'Times New Roman', serif;
/* 也可以，但容易漏 */
font-family: Georgia, 'Times New Roman', serif;4. 通用字体族必须放在最后
这是底线。通用字体族是最后的保险，浏览器无论如何都能渲染出来。常见的五个通用字体族：
serif— 衬线字体（如宋体、Times New Roman）sans-serif— 无衬线字体（如微软雅黑、Arial）monospace— 等宽字体（如Consolas、Courier New）cursive— 手写体（如Comic Sans）fantasy— 装饰体（如Impact）
我的习惯：正文只用 sans-serif 或 serif，代码用 monospace。cursive和fantasy很少用，因为各系统渲染差异太大，不可控。
5. 完整的字体栈示例
给你一个我项目里常用的模板，直接复制就能用。
/* 中文正文 */
body {
font-family:
-apple-system, /* macOS/iOS系统字体 */
BlinkMacSystemFont, /* macOS Chrome */
'Segoe UI', /* Windows */
'PingFang SC', /* macOS/iOS中文 */
'Microsoft YaHei', /* Windows中文 */
'Noto Sans CJK SC', /* Android/Linux中文 */
'Helvetica Neue', /* macOS英文 */
Arial, /* 通用英文 */
sans-serif; /* 最终兜底 */
}
/* 代码块 */
code, pre {
font-family:
'Fira Code', /* 程序员最爱 */
'Cascadia Code', /* Windows Terminal */
'Source Code Pro', /* Adobe出品 */
Consolas, /* Windows经典 */
'Courier New', /* 通用等宽 */
monospace; /* 最终兜底 */
}你想想看，这个字体栈覆盖了多少场景？Mac用户看到苹方，Windows用户看到雅黑，Linux用户看到Noto Sans。就算某个字体缺失，也能平滑降级。这就是专业字体栈的价值。
核心要点：字体栈不是越长越好，关键是覆盖主流平台。我一般控制在5-7个字体，太多反而增加浏览器匹配开销，太少又容易降级到难看字体。
好了，Web安全字体这块就聊这么多。记住一句话：别指望用户跟你用一样的系统。写好字体栈，就是你对用户最基本的尊重。