应使用跨平台字体栈而非单写SimHei,推荐font-family: system-ui, -apple-system, "PingFang SC", "Heiti SC", "Noto Sans CJK SC", sans-serif;SimHei仅Windows可用,iOS不支持,且为单字重字体,设font-weight:900无效。
font-family 里写 SimHei 就行,但别只写它
直接写 font-family: simhei; 看起来能生效,但实际在 macos、linux 或某些 windows 非简体中文系统上会 fallback 到默认字体,甚至显示成方块。黑体不是通用字体名,它是 windows 下的特定字体文件名。
正确做法是把黑体放在一个带兜底的字体栈里,确保跨平台可读:
- Windows 用户真正用的是
SimHei(中易黑体),不是“黑体”二字本身 - macOS 用户没有
SimHei,得靠Helvetica Neue或Heiti SC接手 - 必须在末尾加
sans-serif,否则 iOS Safari 可能渲染异常
推荐写法:font-family: "SimHei", "Heiti SC", "Helvetica Neue", sans-serif;
用 font-family: "Microsoft YaHei" 更稳妥?
很多人误以为 Microsoft YaHei(微软雅黑)是黑体——它确实是无衬线字体,但属于“细黑”风格,字重比传统黑体轻,视觉上更现代、更细。如果你要的是印刷级厚重感的黑体效果,它不等价于 SimHei。
不过它确实更普及:Win7+ 默认自带,部分 macOS 和 Linux 也通过兼容包支持。如果项目优先保可用性而非严格字形,可以考虑:
立即学习“前端免费学习笔记(深入)”;
- 用
"Microsoft YaHei"替代"SimHei",尤其面向办公场景用户 - 但注意:它默认
font-weight: 400,想加粗得显式设font-weight: bold或700,否则看起来“不够黑” - 避免混用:不要写
"SimHei", "Microsoft YaHei", sans-serif—— 两者风格差异明显,fallback 时跳变突兀
font-weight 设成 900 也没用?
font-weight: 900 只有当前字体文件里真有对应字重时才生效。而 SimHei 是单字重字体(只有常规粗细),强行设 900 不会变粗,浏览器会默默降级到 400。
验证方法:打开开发者工具 → Elements → Computed → 查看 font-weight 实际计算值,常会显示 400 即使你写了 900。
- 若真需要更粗效果,改用
Microsoft YaHei UI(Win10+ 自带,支持600/700) - 或引入 webfont,比如思源黑体 +
@font-face指定不同font-weight文件 - 慎用
text-shadow: 0 0 1px #000模拟加粗——高缩放下边缘发虚,打印失效
移动端 Safari 显示不了 SimHei?
iOS 和 iPadOS 完全不识别 SimHei,连 fallback 都不触发,直接跳过。这不是 bug,是 Apple 明确不支持 Windows 字体名。
解决方案不是“加个判断”,而是从一开始放弃依赖 SimHei:
- 对纯中文内容,优先用
"PingFang SC"(iOS/macOS) +"Heiti SC"(旧版 macOS) - 安卓端可加
"Noto Sans CJK SC"(开源,Google 提供,覆盖广) - 终极建议:用
system-ui开头,让系统自己选最匹配的无衬线体,比如font-family: system-ui, -apple-system, "PingFang SC", "Heiti SC", "Noto Sans CJK SC", sans-serif;
真正难处理的不是怎么写,而是得接受:没有一种写法能在所有设备上“精准还原黑体”。能保证可读、不崩、不糊,就是现阶段最实在的目标。










