应使用 :root 定义语义化字体变量（如 --font-sans），全局声明、统一命名、强制引用，禁止硬编码；需兼顾降级策略、大小写敏感性、IE 兼容后备及团队执行规范。
用 :root 定义字体变量，而不是在每个选择器里重复写 font-family
直接在根元素上声明变量，所有后代都能继承和复用，改一处就全局生效。别在 .header、.button、.article 里各自写一遍 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;——那是维护噩梦。
常见错误是把变量定义在某个局部 div 或组件内，结果子元素取不到；或者变量名起得太模糊，比如 --text-font，后面加个标题字体、代码字体时就乱套。
- 统一用语义化命名：
--font-sans（无衬线主字体）、--font-serif（正文字体）、--font-mono（代码字体） - 值里保留系统字体栈，别只写
"Inter"：优先用本地高性能字体，兜底到系统默认sans-serif - 在
:root中定义，确保全局可访问：:root { --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-serif: Georgia, "Times New Roman", serif; --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
在组件中用 var(--font-sans) 而不是硬编码字体栈
变量不是摆设，得真用起来。很多项目定义了变量但实际样式里还是手敲一串字体名，等于白干。关键在「一致性」——不是能不能用，而是「是否强制走变量路径」。
典型翻车场景：设计师临时让某处按钮用衬线体，开发顺手加了个 font-family: "Georgia"，结果半年后没人记得这行特例，改主字体时漏掉它。
立即学习“前端免费学习笔记（深入）”；
- 所有
font-family声明必须基于变量：font-family: var(--font-sans);，禁止直接写字体名 - 需要局部覆盖时，也用变量覆盖：
.hero-title { --font-sans: "GT America", var(--font-sans); }，保持链路清晰 - 注意 CSS 自定义属性的大小写敏感性：
var(--FONT-SANS)和var(--font-sans)是两个东西
处理字体加载失败或系统不支持时的降级逻辑
CSS 变量本身不解决字体加载问题，但能帮你更干净地组织降级策略。很多人以为设了变量就万事大吉，其实 font-family 的解析规则没变：浏览器从左到右匹配，遇到缺失就跳下一个。
容易忽略的是，变量值里如果写了自定义字体（如 "Inter"），而该字体没加载成功或被广告拦截器屏蔽，就会直接 fallback 到最后一个通用族，中间断层。
- 始终把系统字体栈放在变量值末尾：
--font-sans: "Inter", -apple-system, sans-serif;，别写成"Inter", sans-serif, -apple-system; - 避免在变量里混用引号风格：
"Helvetica Neue", 'Helvetica'没问题，但'Helvetica Neue", sans-serif会整个失效 - 如需监控字体加载状态，得靠
document.fonts.load()+ JS，CSS 变量管不了这个
兼容老浏览器时别指望 var()，得留 CSS 后备声明
IE11 及更早版本完全不支持 CSS 变量，如果你的站点还要兼容它，光靠 var(--font-sans) 就会全站变成默认 Times New Roman。
这不是“要不要用变量”的问题，而是“怎么安全地用”。不能因为目标用户里有 0.3% 的 IE 用户就放弃变量，但也不能假装它不存在。
- 写法必须带后备：
p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-family: var(--font-sans); }注意顺序：老浏览器读第一行，新浏览器覆盖为第二行 - 构建工具（如 PostCSS）可以自动补后备，但得确认插件配置正确，有些默认只处理
calc()不碰var() - 别用
@supports (font-family: var(--x))做特性检测——这句本身在不支持变量的浏览器里就是无效语法，会导致整条规则被丢弃
