速查在线工具箱CSS 里写了微软雅黑，Mac 用户看到的为什么是别的字体？
字体声明不是「指定唯一字体」，而是「按顺序逐个尝试」，找不到就继续往后走。
因为这是字体栈的正常工作方式。浏览器拿到一串字体名后，会从左到右逐个检查本机有没有，找到第一个存在的就用它，后面的全部忽略。微软雅黑是 Windows 系统字体，Mac 上并不存在，于是浏览器继续往后找——如果你后面只写了通用的兜底族，它就会用系统默认中文字体渲染。
正确做法是把各平台的中文字体都写进去，让各平台各取所需：苹果平台的苹方、Windows 的微软雅黑、安卓与 Linux 的思源黑体或文泉驿，最后以通用族兜底。此外还有两个会让整条声明失效的坑：字体名含空格时必须加引号，否则会被拆成两个字体名，两个都找不到；把字重或粗体后缀写进字体名同样会让声明失效，字重应该由独立属性控制。
中文字体是网页排版里最容易踩坑的地方，因为各操作系统的中文字体互不通用：苹果用苹方，Windows 用微软雅黑，安卓用思源黑体，彼此不共享，字体名写错一个字符就会静默失效。
静默是关键。字体没生效不会有任何报错，浏览器只是安静地回退到默认字体，页面看起来「还行」，但和你的设计意图完全不同。本文讲清回退机制、各平台字体清单，以及两个会让整条声明报废的写法错误。
1回退机制是怎么工作的
理解这个机制，就能理解为什么「按顺序写多个字体」不是冗余，而是必需品。
| 书写顺序 | 浏览器的行为 | 结果 |
|---|---|---|
| 字体在本机存在 | 立即采用，忽略后面全部 | 符合预期 |
| 字体不存在 | 继续检查下一个 | 回退，不报错 |
| 含空格未加引号 | 被拆成两个独立字体名 | 两个都找不到，整段失效 |
| 字重写进字体名 | 找不到名为粗体的字体 | 整条声明失效 |
| 全都不存在 | 用通用族或浏览器默认字体 | 页面仍可读，但与设计不符 |
| 顺序写反了 | 兜底字体排在前，先被命中 | 等于放弃了控制权 |
最后一行是最浪费的一种写法：把通用族或者系统默认字体写在最前面，浏览器第一个就命中了它，后面精心挑选的字体一个都不会被用到。
2各平台的中文字体清单
把下面这些名字都写进字体栈，各平台才会分别命中各自存在的那个。
| 平台 | 无衬线中文字体 | 衬线中文字体 | 覆盖情况 |
|---|---|---|---|
| macOS 与 iOS | 苹方 | 宋体-简 | 较新系统均内置；更早的系统为冬青黑体 |
| Windows | 微软雅黑 | 宋体 | 自 Vista 起内置雅黑 |
| Android 与 ChromeOS | 思源黑体 | 思源宋体 | 随系统内置 |
| Linux | 文泉驿微米黑 | 视发行版 | 并非所有发行版默认安装 |
| 通用兜底 | system-ui 与 sans-serif | serif | 现代浏览器支持 system-ui |
字体体积不小：苹方约 12MB、微软雅黑约 10MB，思源黑体全量在 8MB 到 15MB 之间。这些都是系统字体，用字体栈引用不会产生下载——但如果改用自托管方式，单页就要背上十几兆的负担。
3两个让声明直接失效的坑
这两个错误的特点是：代码看起来完全正常，页面也不报错，但字体就是不生效。
- 含空格的字体名必须加引号
- 微软雅黑这类名字含空格，不加引号会被解析成两个独立的字体名
- 单个词的字体名不必加引号
- 如宋体这类单段名称，加不加引号都可以
- 字体名里不要带字重
- 把粗体后缀写进名字会让整条声明失效，字重应由独立属性控制
- 不要写不存在的别名
- 各系统的字体名不同，凭印象拼写会导致静默回退
- 中英文混排靠字符分别取用
- 中文字体通常自带西文字形，西文字体不含汉字，浏览器会按字符分别选字体
- 顺序决定效果
- 中文优先时把中文字体放最前，西文优先时把西文系统字体放最前
4三种优先方向怎么选
没有通用最优解，取决于页面内容的语言构成。
| 优先方向 | 适用场景 | 代价 |
|---|---|---|
| 中文优先 | 以中文为主的内容站 | 中文自带的西文字形通常不是最优，英文会显得略宽 |
| 西文优先 | 中英混排的技术文档 | 需要理解浏览器按字符分别取字体的机制 |
| 等宽代码 | 代码块与需要对齐的数字表格 | 中文回退到无衬线字体，行高与字距需要单独调 |
等宽字体栈要单独处理的原因：代码与对齐数字需要真正等宽的西文字形，而中文字体自带的西文通常并非等宽。所以要把等宽西文字体放在前面，中文再回退到无衬线字体。
5写完怎么验证
字体问题无法靠读代码发现，必须验证。
- 先按内容语言确定优先方向，不要一套字体栈到处用。
- 把各平台的中文字体按顺序写进去，再以通用族结尾。
- 逐项检查字体名：含空格的加引号，名字里不带字重后缀。
- 确认顺序没有把兜底字体写在前面。
- 在自己的设备上打开页面，用开发者工具查看实际使用的字体，而不是靠肉眼判断。
- 换一个不同操作系统的设备或虚拟机复核，这一步最容易暴露平台差异。
- 如果用了自托管字体，先做字符子集化再上线，否则首屏体积会失控。
顺着这个问题往下用
全部工具总览 →相关疑问
为什么我写了微软雅黑，Mac 用户看到的还是苹方？
因为微软雅黑没有安装在 Mac 上。浏览器按顺序往后找，最终命中后面的中文字体或系统默认——这其实是字体栈在正常工作。解决办法不是把微软雅黑写得更靠前，而是把苹方也写进字体栈，让苹果设备命中苹方、Windows 设备命中雅黑，各取所需。
网站用系统字体会涉及版权吗？
用字体栈引用用户本机已有的字体，不涉及把字体文件分发给用户，通常不构成侵权。需要注意两种情况：把使用了某款字体的页面截图用于商业宣传，以及用自托管方式把字体文件放到服务器上供浏览器下载。后者属于向公众提供字体文件，需要相应的授权。
自托管中文字体可行吗？
大多数情况下不合适。中文字体全量文件通常有十几兆，远超网页可接受的加载体积。除非做字符子集化，只保留页面实际用到的字符，把体积压到几百 KB 以内。更稳妥的默认做法是使用系统字体，只在确有品牌需求时才考虑子集化方案。
中英混排时字重看起来不一致怎么办？
这是字体各自提供的字重档位不同造成的。英文字体可能只提供常规与粗体两档，中文字体则提供多档，当你设置一个中间字重时，英文字体找不到对应档位就会向上取到粗体，于是西文看起来比中文更粗。解决办法是选择字重档位较全的字体组合，或把字重设置在两端以避免自动映射。
继续看：相关问题与资料
全部问题解答 →内容说明：本页针对具体使用问题作答，方法步骤与数值由本站自行整理与复算，事实性内容以对应官方规范与文档为准。内容最后核对日期：2026-10-08。若发现错误，欢迎通过页脚反馈入口告知。