必须用字体栈并配回退机制，如font-family: "pingfang sc", "microsoft yahei", sans-serif；font-size优先用rem；禁用标签；canvas文字需context.font完整设置；网络字体须加font-display: swap。
用 font-family 指定字体族，必须配回退机制
直接写 "Microsoft YaHei" 会失败——如果用户系统没装这个字体，浏览器就显示默认的 Times New Roman 或等宽字体。必须用逗号分隔多个选项，形成字体栈：font-family: "PingFang SC", "Microsoft YaHei", sans-serif;。其中 sans-serif 是通用字体族，所有浏览器都认，是最后兜底项。
常见错误：只写一个中文字体名，或把英文引号漏掉（font-family: Microsoft YaHei; 不生效）；还有的把 serif 和 sans-serif 拼错成 san-serif，导致整个声明被忽略。
设置 font-size 时，单位选错会导致响应式失效
px 固定像素适合局部微调，但不利于缩放和无障碍访问；em 相对父元素，嵌套深了容易失控；rem 是更稳妥的选择，它始终相对于根元素 的字号，方便统一调控。
实际建议：
- 全局基础字号设为
html { font-size: 16px; }，再用rem写其他尺寸 - 表格内文字慎用
em，因为<table> 默认没有字号继承链，容易意外变小 <li>避免混用单位，比如 <code>font-size: 1.2em / 16px这种写法在 CSS 中不合法 - 单个元素加
style="font-family: Arial; font-size: 14px;" - 多个同类元素加 class，例如
<p class="caption"></p>，然后在<style></style>里统一定义 - 需要全局控制？直接改
body或html的font-family和font-size - 中文字体名带空格必须加引号，否则 Safari 会截断
- 字号单位必须明确（
px、em等），不能省略 - 设置完
font后，必须紧接着调用fillText()或strokeText()，中间插别的绘图操作不会重置字体，但容易误以为失效
别用 <font></font> 标签，它已被 HTML5 废弃
哪怕只是临时改一段字，也别写 <font face="Arial" size="3">xxx</font>。现代浏览器虽可能渲染，但 W3C 已移除该标签语义，部分辅助工具会跳过它，SEO 也不识别其内容权重。更关键的是，它无法响应媒体查询、不能被 JavaScript 动态修改样式属性、跟 CSS 变量完全不兼容。
替代方案很直接：
Canvas 文字必须通过 context.font 设置，且格式不能省略
Canvas 不吃 CSS，font-family 和 font-size 必须合并在一个字符串里，像这样：ctx.font = "16px 'Helvetica Neue'";。只写 "16px" 或只写 "'Helvetica Neue'" 都无效。
还要注意：
真正容易被忽略的是字体加载时机——用 @import 或 @font-face 引入网络字体时，文字可能先以备用字体闪现一次。如果没配 font-display: swap;，用户会看到空白或布局偏移。这点在首屏文字上尤其明显。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
