index.html如何设置网页的默认字体系列？-html教程-PHP中文网

全局默认字体应设在body上并使用包含中西文字体及sans-serif兜底的完整字体栈，因系统字体跨平台差异大，单字体易回退至times new roman，影响一致性与可读性。

index.html如何设置网页的默认字体系列？

用 `body` 的 `font-family` 设置全局默认字体

网页默认字体不是靠或单独的 meta 标签控制，而是通过 CSS 作用在 body（或更顶层的 html）上生效。直接写在 <style></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"，若未安装对应字体包，也会跳过并继续向后匹配。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 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，文字突然变衬线、排版错乱。