HTML5中font标签已被废弃，应使用CSS的font-family属性设置字体，需按平台分层声明并添加sans-serif兜底，自定义字体应配合font-display:swap和preload优化加载。
HTML 中设置字体用 font 标签已经失效了
现在直接写 <font face="SimSun"> 不会生效，浏览器根本不管——这不是你代码写错了，是这个标签早在 HTML5 里就被正式废弃了。W3C 不再支持，所有现代浏览器（Chrome、Firefox、Edge、Safari）都只当它不存在。
如果你在旧项目里看到它还能“显示”，大概率是浏览器在兼容模式下偷偷兜底，但行为不可靠，尤其在移动端或严格渲染模式下会直接失效。
真正该用的方案：CSS 的 font-family
替换方式很简单：把 <font face="Microsoft YaHei, sans-serif"> 这类写法，改成内联样式或外部 CSS 中的 font-family 声明。
- 内联写法：
<p style="font-family: 'Microsoft YaHei', sans-serif;">正文</p> - 推荐用 class：
<p class="text-main">正文</p>，然后在<style>或 CSS 文件里写.text-main { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; } - 中文字体名带空格或特殊字符，必须加英文引号，比如
"Times New Roman"，不加引号在某些浏览器里会截断成Times -
sans-serif是必需的兜底项，不能省；否则遇到系统没装指定字体时，可能回退到等宽字体甚至空白
常见错误：中文网页只写英文字体名
比如 font-family: Arial, Helvetica, sans-serif; —— 这在中文环境里大概率显示成默认宋体或系统默认无衬线体，但你完全控制不了，尤其 macOS 和 Windows 渲染差异极大。
立即学习“前端免费学习笔记（深入）”；
正确做法是按平台习惯分层声明：
- macOS 优先：
"PingFang SC", "Hiragino Sans GB" - Windows 优先：
"Microsoft YaHei", "SimSun" - Linux 常见：
"Noto Sans CJK SC", "WenQuanYi Micro Hei" - 最后统一兜底：
sans-serif
顺序很重要：浏览器从左到右匹配第一个可用字体，写反了会导致 Windows 用户看到 macOS 字体 fallback 行为。
字体加载慢？别让 @font-face 拖垮首屏
自定义字体（比如用 @font-face 引入 .woff2 文件）确实能统一视觉，但默认会阻塞文本渲染，用户可能白屏几百毫秒才看到字。
- 加
font-display: swap;是最简单有效的解法，告诉浏览器先用系统字体撑开布局，等自定义字体加载完再换 - 不要在
<head>里用<link rel="stylesheet">同步加载字体 CSS，改用rel="preload"提前抓取：<link rel="preload" as="font" href="font.woff2" type="font/woff2" crossorigin> - 注意
crossorigin属性必须加上，否则font-display: swap在多数浏览器里不生效
字体不是越全越好，一个页面稳定用 2–3 种字重（regular / bold）+ 1–2 种字体族就足够，多套 @font-face 规则会显著拖慢 CSS 解析和字体下载。
