网页默认字体设置方法详解

Windows、macOS、Linux 对中文字体的命名和预装情况差异极大：SimSun 在 Windows 常见，但在 macOS 上不存在；Heiti SC 是 macOS 原生黑体，却不在 Windows 默认安装列表里。硬编码单一字体等于主动放弃跨平台一致性。

更隐蔽的问题是：某些 Linux 发行版（如 Ubuntu）默认不带中文支持，即使写了 "Noto Sans CJK SC"，若未安装对应字体包，也会跳过并继续向后匹配。

• 优先使用系统自带字体（性能好、无需加载）
• 把 macOS / Windows / Android / iOS 各自主流字体列全，顺序反映渲染偏好
• 避免使用需额外加载的网络字体作为“默认”，那会阻塞文本渲染

font-family 写在 html 还是 body？

写在 html 元素上理论上能覆盖所有后代，但实际中多数 CSS 框架和重置样式（如 Normalize.css）会显式给 body 设定字体，导致 html 的设置被覆盖。更可靠的做法是直接作用于 body，并加 !important（仅当有第三方样式冲突时）。

• 普通项目：设在 body 即可，简洁且符合惯例
• 嵌入式页面或 CMS 环境：检查是否有全局重置 CSS，必要时用 html, body 双选中器
• 不要对单个元素（如 h1）重复设 font-family，除非真有特殊设计需求

移动端 Safari 和 Chrome 对字体栈的特殊处理

iOS 13+ 开始，-apple-system 不仅代表 San Francisco，还会根据语境自动切换细体/中黑/粗体；Android Chrome 则更倾向信任 Roboto。但如果用户手动修改了系统字体大小或开启了“粗体文本”辅助功能，部分老写法（如漏掉 BlinkMacSystemFont）会导致字体回退到 Times，文字突然变衬线、排版错乱。

• 移动端必须包含 -apple-system 和 BlinkMacSystemFont，二者缺一不可
• Android 用户可能用 MIUI 或 EMUI，它们会替换系统字体，所以保留 Roboto 仍是安全选择
• 测试时打开系统“显示与文字大小”设置，确认小字号下是否仍清晰可读

真正难的不是写对那一行 CSS，而是想清楚你要服务哪些设备、哪些用户，以及是否愿意为极少数没装中文字体的 Linux 用户留一条可读的退路。

好了，本文到此结束，带大家了解了《网页默认字体设置方法详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！