应通过:root定义语义化字体变量（如--font-sans），全局显式应用var(--font-sans)到所有文本元素（含button、input等），切换时仅修改body类并覆盖变量值，末尾必须保留sans-serif等通用族名以保障回退；clamp()配合rem实现平滑响应式字号，避免px硬编码和继承依赖。
直接改 font-family 堆栈和 font-size 单位组合，别碰内联样式批量硬编码；关键在根级控制、回退机制和单位选择——否则移动端发虚、中文字体加载失败、表单控件字体不一致。
怎么用 CSS 变量统一控制响应式字体族
把字体族抽象成 --font-sans 和 --font-serif 这类变量，定义在 :root 里，再让所有元素（包括 button、input、textarea）都显式引用 var(--font-sans)。这样换字体时只需切一个 body class，不用遍历 DOM 或写重复规则。
-
:root中定义：--font-sans: "Noto Sans SC", "Microsoft YaHei", sans-serif; - 全局应用：
body, button, input, textarea { font-family: var(--font-sans); } - 切换 serif 风格时，只加
body.font-serif类，再用.font-serif { --font-sans: var(--font-serif); }覆盖变量值 - 避免用
body { font-family: ... }然后指望子元素继承——表单控件 UA 样式会无视它
为什么 clamp() 比媒体查询更适合中文响应式字号
中文排版对小屏可读性更敏感，clamp(1.125rem, 4vw, 1.5rem) 能在 320px–1200px 视口间平滑缩放，而手动写 @media (max-width: 768px) 容易漏断点、字号跳变生硬，且维护成本高。
-
4vw在 iPhone SE 上约等于14.4px，刚好满足最小可读阈值；在桌面端不会无限放大 - 必须配
html { font-size: 16px; }基准，否则rem和clamp()计算失准 - 慎用
px直接写死字号：它绕过用户系统缩放（如 Windows “放大文本”设为 125%），损害可访问性
Google Fonts 字体加载失败时怎么兜底
网络字体加载失败会导致 FOUT（Flash of Unstyled Text）或 FOIT（Flash of Invisible Text），尤其在国内弱网环境下。不能只靠 @import 或 <link>，得加本地回退 + font-display: swap。
立即学习“前端免费学习笔记（深入）”；
- 用
@font-face显式声明，并强制font-display: swap：@font-face { font-family: 'Noto Sans SC'; src: url('...'); font-display: swap; } - 字体堆栈末尾必须保留系统中文字体：例如
"Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif - 避免只写
"Noto Sans SC", sans-serif——sans-serif 在 macOS 和 Windows 渲染出的默认字体完全不同，中文显示效果割裂 - 不要在
<head>里用@import引入 Google Fonts：它会阻塞 CSS 解析，拖慢首屏渲染
修改浏览器默认字体会影响页面吗
只影响未声明 font-family 的元素；一旦页面 CSS 显式设置了字体（哪怕只写了一句 body { font-family: sans-serif; }），浏览器默认设置就完全失效。所以「改浏览器设置」对开发调试意义不大，但对终端用户阅读体验很关键。
- Chrome/Edge 设置路径：设置 → 外观 → 自定义字体 → 关闭“允许页面选择自己的字体”才能强制生效
- Firefox 用户可用
userContent.css注入全局规则，比扩展更底层、更稳定 - Stylus 扩展注入的
!important规则能覆盖多数网站，但遇到style属性内联字体（如<p style="font-family: Arial">）仍会被优先级压制
最易被忽略的是表单控件字体必须单独声明，以及 font-display: swap 必须和字体堆栈配合使用——光加 swap 不写回退字体，加载失败时文字直接不可见。
