HTML中字体控制完全依赖CSS，font标签已废弃；应使用font-family、font-size等CSS属性，配合引号包裹含空格中文字体名、合理字体栈及font-display:swap等策略确保兼容与性能。
HTML 本身不直接控制字体样式，font 标签早已被废弃，真正生效的是 CSS 的 font-family、font-size 等属性。用错方式不仅无效，还可能被浏览器忽略或触发兼容性问题。
用 style 属性内联设置字体最简单
适合单个元素快速调整，无需额外 CSS 文件。但注意：只推荐临时调试或极简页面使用，不适合维护。
-
font-family必须是字体族名，优先写具体字体（如"Helvetica Neue"），再加通用备选（如sans-serif） - 中文字体名含空格时必须用英文引号包裹，例如
"Microsoft YaHei"或"PingFang SC" -
font-size推荐用px（固定）、rem（响应式）或em（相对父级），避免用pt或in
<p style="font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 16px;">这段文字用了无衬线字体</p>
font 标签在现代 HTML 中完全不可用
HTML5 已移除 <font></font> 标签，任何浏览器都不会按预期渲染它。即使写成 <font face="SimSun">中文</font>，Chrome、Firefox、Safari 都会忽略该标签的样式作用，仅保留文本内容。
- 旧项目迁移时务必搜索并替换所有
<font></font>标签 - 若依赖 jQuery 插件或老旧 CMS 输出了
<font></font>，需用 CSS 覆盖或 JS 清洗 DOM - W3C 验证器会直接报错：
Element font is obsolete. Use CSS instead.
通过 <link> 引入 Google Fonts 等网络字体
想用思源黑体、Noto Serif 等开源字体，不能只靠系统已安装字体，必须显式加载。Google Fonts 是最常用方案，但要注意加载时机和回退机制。
立即学习“前端免费学习笔记（深入）”；
- 在
中插入<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap"> - CSS 中写
font-family: 'Noto Sans SC', 'PingFang SC', sans-serif;—— 顺序决定 fallback 行为 -
&display=swap很关键：避免字体加载期间文字空白（FOIT），改用系统字体临时显示（FOUT） - 国内访问 Google Fonts 不稳定，可考虑镜像源（如
https://fonts.loli.net）或下载字体文件自托管
字体加载失败时的降级策略常被忽视
用户没装指定字体、网络中断、CDN 失效都会导致字体加载失败。只写一个字体名等于把显示权交给运气。
- 永远用逗号分隔多个字体名，形成“字体栈”：例如
"SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif - 最后必须是通用字体族（
serif/sans-serif/monospace），否则浏览器可能用默认等宽字体渲染段落 - 用
@font-face自定义字体时，font-display: swap;是必备声明，否则 Chrome 会阻塞文本渲染长达 3 秒 - 可通过
document.fonts.check()检测特定字体是否可用，但兼容性有限（不支持 IE）
字体不是“设了就能用”，它涉及加载、解析、回退、渲染多个环节。最易出问题的是中文字体名未加引号、网络字体没配 swap、以及盲目信任用户系统里有“微软雅黑”。实际部署前，务必在无缓存模式下测试不同网络条件和设备。
