HTML5 中 font 标签的 face 属性已彻底失效，必须用带引号、逗号分隔、末尾兜底通用字体族的 font-family 替代，且自定义字体需严格匹配 @font-face 声明与使用处的名称及 weight。
font 标签的 face 属性在 HTML5 中已完全失效，浏览器（Chrome、Firefox、Safari）直接忽略它——不是“不推荐”，而是“压根不执行”。必须用 font-family 替代，且不能只写一个字体名。
为什么单写 "Microsoft YaHei" 会出问题
常见错误是只写一个中文字体，比如 font-family: "Microsoft YaHei";。这会导致：
- Windows 上可能渲染成功，macOS 或 Linux 上因缺少该字体而回退到 Times New Roman（空白或丑陋）
- 没有引号包裹中文名时，
font-family: Microsoft YaHei;被解析为两个独立关键字Microsoft和YaHei，直接失效 - 未提供通用字体族（如
sans-serif），部分旧 UA stylesheet 可能强制 fallback 到 serif
font-family 字体栈怎么写才可靠
必须用逗号分隔、带引号、末尾兜底。典型写法：
body {
font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif;
}
要点：
立即学习“前端免费学习笔记（深入）”；
- 中文字体名必须用双引号或单引号包裹，哪怕全是英文（如
"Helvetica Neue"） - 优先列系统自带中文字体，按主流 OS 排序：Windows → macOS → Linux
- 末尾一定要加
sans-serif或serif，否则 iOS Safari 等可能意外使用等宽字体 - 避免用
font标签残留的 class 或内联 style 混合控制，统一走 CSS 选择器
旧项目里还留着 <font face="..."> 怎么批量替换
不能靠 CSS 覆盖修复，因为 <font> 标签本身不生成可样式化节点，只是普通文本容器。必须删掉标签，把文本内容提出来，再套语义化标签或加 class：
- 简单文本：把
<font face="SimSun">文字</font>改成<span class="text-serif">文字</span>，再在 CSS 里定义.text-serif { font-family: "SimSun", "NSimSun", serif; } - 标题类内容：优先改用
<h2>等语义标签，再通过h2 { font-family: ... }控制 - 全局替换时注意：VS Code 搜索
<font[^>]*face=可抓到大部分残留，但要人工确认是否嵌套在其他标签里
@font-face 引入自定义字体时，font-family 名怎么配才不踩坑
自定义字体的 font-family 名和实际引用必须严格一致，且带引号：
@font-face {
font-family: "MyZhFont";
src: url("./fonts/my.woff2") format("woff2");
}
p.custom {
font-family: "MyZhFont", "Noto Sans CJK SC", sans-serif;
}
关键点：
-
font-family在@font-face和使用处必须完全相同（包括引号、大小写、空格） - src 路径以 CSS 文件位置为基准，不是 HTML 文件；本地开发时相对路径容易错，建议用 DevTools 的 Network 面板验证 404
- 不要省略
font-display: swap，否则首屏文字可能长时间空白 - 如果字体文件含多个字重，
font-weight必须显式声明，且与文件实际 weight 匹配，否则浏览器不加载
最常被忽略的是字体栈末尾的通用族和引号——看起来小事，但一漏就跨平台失真。别信“我本地看着好就行”，得在真机上开深色模式、缩放 200%、切到 iPadOS 测一遍。
