全局默认字体应设在body上并使用包含中西文字体及sans-serif兜底的完整字体栈，因系统字体跨平台差异大，单字体易回退至Times New Roman，影响一致性与可读性。
用 body 的 font-family 设置全局默认字体
网页默认字体不是靠 <html> 或单独的 meta 标签控制，而是通过 CSS 作用在 body（或更顶层的 html）上生效。直接写在 <style> 里最稳妥，避免外部样式干扰。
常见错误是只写一个字体名，比如 font-family: "Helvetica";——这会导致在没有该字体的系统上回退到浏览器默认字体（通常是 Times New Roman），完全失去控制。
- 必须提供字体栈（font stack），按优先级从左到右排列
- 中文字体要放在西文字体之后，并用引号包裹含空格的名称，如
"PingFang SC" - 末尾务必加上通用族名
sans-serif或serif，这是关键兜底项
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
</style>
为什么不能只依赖系统字体名（如 SimSun）？
Windows、macOS、Linux 对中文字体的命名和预装情况差异极大：SimSun 在 Windows 常见，但在 macOS 上不存在；Heiti SC 是 macOS 原生黑体，却不在 Windows 默认安装列表里。硬编码单一字体等于主动放弃跨平台一致性。
更隐蔽的问题是：某些 Linux 发行版（如 Ubuntu）默认不带中文支持，即使写了 "Noto Sans CJK SC"，若未安装对应字体包，也会跳过并继续向后匹配。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 优先使用系统自带字体（性能好、无需加载）
- 把 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 用户留一条可读的退路。
