字体无效的主因是font-family回退链断裂、@font-face加载失败或匹配错误、CSS层叠覆盖、系统策略干扰；需规范书写、检查网络请求、验证继承与覆盖、跨平台兜底。
字体声明写对了但没效果，先看 font-family 回退链是否断裂
很多情况是 font-family 值本身语法有误，比如中文字体名含空格却没加引号，或英文逗号后多写了空格导致浏览器截断解析。回退链一旦在某个字体处中断（例如系统里根本不存在该字体，又没写合法的通用族名），后续所有字体都会被忽略。
确保写法符合规范：
- 中文字体名必须用英文引号包裹，如
"PingFang SC"、"Microsoft YaHei" - 多个字体间用英文逗号分隔，逗号后不加空格（部分浏览器会容忍，但 Safari 旧版本可能失败）
- 末尾务必加上通用族名：
serif、sans-serif或monospace，这是 CSS 字体回退的强制终点
错误示例：font-family: Helvetica, "Hiragino Sans GB", sans serif;（末尾 sans serif 是两个词，应为 sans-serif）
自定义字体（@font-face）加载失败或未匹配到元素
用开发者工具的 Network 面板检查 .woff2、.ttf 等字体文件是否返回 200；若返回 404 或 CORS 错误，@font-face 规则即使存在也不会生效。另外，字体能否显示还取决于 font-family 值与 @font-face 中 font-family 的声明是否完全一致（包括大小写、空格、引号）。
立即学习“前端免费学习笔记（深入）”；
常见疏漏点：
-
@font-face中的src路径是相对于 CSS 文件位置，不是 HTML 页面 - 使用
local()时，系统字体名需与操作系统实际注册名一致（例如 Windows 的"Segoe UI"在 macOS 上不存在） - 字体加载完成前，浏览器可能已渲染文本，造成“闪动”或回退到默认字体——可配合
font-display: swap缓解
字体被更高优先级规则覆盖或继承异常
CSS 层叠和继承常被低估。即使你在 .title 上写了 font-family: "Noto Sans CJK SC", sans-serif;，也可能被父级的 font 简写属性（如 font: 14px/1.5 "Arial"）整体覆盖，导致家族名丢失。
快速定位方法：
- 在开发者工具中选中元素，查看 Computed 标签页里的
font-family实际值 - 逐层向上检查 Styles 面板，看哪条规则带
font简写且没有显式重设font-family - 注意
all: unset或all: revert会清空包括字体在内的所有继承值
系统字体策略或浏览器限制干扰显示
某些环境会主动干预字体渲染：macOS 启用“使用粗体 Web 字体”选项时，可能强制替换细体字；Chrome 120+ 对未声明 font-display 的自定义字体启用更激进的隐藏策略；iOS Safari 对本地字体名大小写极其敏感（"helvetica" ≠ "Helvetica"）。
验证是否为系统级干扰：
- 换一台设备或浏览器复现，排除本地策略影响
- 临时禁用浏览器扩展（尤其广告/字体拦截类）
- 在隐身窗口中测试，绕过缓存和用户样式表
真正棘手的是跨平台字体名不一致问题——同一款字体在不同系统注册名不同，靠单一 local() 几乎无法稳定命中，得靠 format() + 多格式兜底 + 最终通用族名收口。
