中文字体显示异常主因是font-family声明不当或系统字体缺失；应优先使用英文系统名（如microsoft yahei）、避免混用中英文名、确保@font-face与调用名称完全一致，并构建含sans-serif兜底的回退链。
中文字体显示异常，90%不是字体本身问题，而是 font-family 声明方式或系统字体缺失导致的回退失效。
font-family 中文名写法是否合法
CSS 中直接写中文名（如 font-family: "微软雅黑"）语法上完全合法，但存在兼容性风险：旧版 Opera、部分嵌入式浏览器或某些构建工具（如 Webpack + CSS-loader）可能因编码解析问题丢弃含中文的声明。更稳妥的做法是用英文别名替代，并确保该别名与系统实际安装的字体名一致。
- 常见中文字体的英文系统名必须准确：
SimSun（宋体）、Microsoft YaHei（微软雅黑）、KaiTi（楷体）、FangSong（仿宋） - Windows 和 macOS 的默认中文字体名不同，
Microsoft YaHei在 macOS 上不存在，会立刻回退到下一个备选字体 - 不要混用中英文名写法，例如
font-family: "微软雅黑", SimSun;—— 前者依赖用户本地是否有该字体文件，后者才是系统级可查的正式家族名
@font-face 引入自定义字体时 font-family 名不匹配
这是最隐蔽也最高频的问题：@font-face 中定义的 font-family 值，必须和后续 CSS 中调用的值逐字一致，包括大小写、空格、引号类型。
- 错误示例：
@font-face { font-family: 'MyFont'; }但使用时写成font-family: MyFont;（缺引号）或font-family: "myfont";（大小写错）→ 浏览器直接忽略匹配 - 正确做法：统一用单引号包裹且保持大小写，例如
@font-face { font-family: 'NotoSansSC'; }→ 使用时必须写font-family: 'NotoSansSC', sans-serif; - 验证方法：打开开发者工具 →「Computed」面板 → 找到
font-family属性，看最终生效的是哪个值；若显示为sans-serif而非你定义的名字，说明未命中
本地字体缺失时如何避免显示异常
用户电脑没装你指定的字体，浏览器就会按顺序尝试备选字体。如果备选链断裂（比如全写了中文名、或只写了一个字体），就可能回退到不可控的系统默认字体，造成中英文混排错位、字重突变甚至方块乱码。
- 构建健壮的回退链：优先用英文系统名，末尾兜底
sans-serif或serif，例如font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; - 避免只写一个字体：像
font-family: 'Source Han Sans CN';这种写法在未加载成功时，会直接跳到浏览器默认字体（通常是 Times New Roman），而非你期望的无衬线体 - 对图标字体尤其敏感：如果
font-family: 'iconfont';没匹配上，后续字符不会自动换字体，而是全部渲染成方块——必须保证第一个名称 100% 正确
字体文件路径或格式导致 @font-face 失效
@font-face 不报错 ≠ 字体已加载。路径错、格式标识错、CORS 限制都会让声明静默失败。
- 路径必须可访问：在浏览器地址栏直接粘贴
url('fonts/myfont.woff2')对应的完整路径，看能否下载到文件；若返回 404 或跨域错误，说明路径或服务器配置有问题 -
format()参数必须标准：.woff2对应'woff2'，.ttf对应'truetype'，写成'ttf'会被 Safari 和旧 Chrome 忽略 - 本地开发慎用
file://协议：Chrome 等浏览器会因安全策略拒绝加载本地字体文件，报错Access to font at 'xxx' from origin 'null' has been blocked，务必通过本地服务器（如http://localhost）访问
真正容易被忽略的是字体文件内部的 PostScript 名——它和你写的 font-family 名可以不同，但 @font-face 声明的名称必须和 CSS 中使用的名称一致，而不是和字体文件名或系统里看到的显示名一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
