Google Fonts字体不生效主因是font-family名不匹配，需查源码确认真实名称；路径错误应核对Network请求URL；WebFont须置于系统字体前并加通用族名；字体度量不一致导致布局抖动，建议预设line-height或用size-adjust校准。
用 @import 引入 Google Fonts 时字体不生效
常见现象是 css 写了 @import url('https://fonts.googleapis.com/css2?family=inter');，但 font-family: 'inter'; 没效果。根本原因是 google fonts 返回的 css 里实际定义的 font-family 名可能带空格或引号，比如 font-family: 'inter variable'; —— 直接写 'inter' 就会失败。
实操建议：
- 打开 Google Fonts 提供的链接（比如上面那个
css2?family=Inter），在浏览器里看它返回的 CSS 源码，找到真实的font-family值，复制完整字符串（含单引号和空格） - 优先改用
&display=swap参数，例如@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');，避免文字闪白或长时间空白 - 不要在
@import后立刻写文字样式；确保样式规则在@import之后加载，或把字体声明放在:root或全局body上
font-face 自托管 WebFont 时字体文件路径错乱
本地放了 fonts/inter-var-latin.woff2，CSS 里写 src: url('./fonts/inter-var-latin.woff2');，但控制台报 404。问题通常出在构建工具或服务器路径解析逻辑上，不是字体本身有问题。
实操建议：
- 检查浏览器开发者工具 Network 面板里请求的完整 URL，对比你写的
url()路径和实际项目根目录结构 —— 很多时候该用../fonts/...或/static/fonts/... - Webpack/Vite 等工具默认不处理
url()中的相对路径，需显式配置assetModuleFilename或用new URL('./xxx.woff2', import.meta.url)（Vite 推荐） - WOFF2 是当前最优选择，但若需兼容旧 IE，得额外加 WOFF 和 TTF 回退，并按格式优先级从高到低排列在
src列表中
CSS font-family 声明顺序影响渲染 fallback 行为
写成 font-family: 'Inter', system-ui, sans-serif; 和 font-family: system-ui, 'Inter', sans-serif; 效果完全不同：前者优先尝试加载 WebFont，后者直接走系统字体，WebFont 可能被跳过。
实操建议：
- WebFont 必须放在系统字体之前，否则浏览器认为“已有可用字体”，就不会触发下载
- 每个字体名必须用英文单引号包裹（如
'Inter Variable'），含空格、连字符、大小写差异都敏感 - 末尾一定要保留通用族名（
sans-serif/serif/monospace），否则某些系统（如旧版 macOS）可能回退到 Times New Roman - 避免堆砌过多字体名，超过 5–6 个会拖慢匹配速度，尤其在低端设备上
字体加载完成前文字不可见或布局抖动
用了 font-display: swap 还是看到文字先空白再弹出，或者段落高度突然变化 —— 这说明字体度量（metrics）没对齐，浏览器用 fallback 字体渲染时行高、字宽和真实 WebFont 不一致。
实操建议：
- 用
font-display: optional可彻底避免 FOIT/FOUT，但代价是部分用户永远看不到你的 WebFont（适合非关键 UI） - 更稳妥的是配合
@font-face的size-adjust和descender-override（Chrome 125+ 支持），手动校准字体度量，但目前兼容性有限 - 最实用的折中方案：给文本容器预设
min-height或固定line-height，并用letter-spacing控制 fallback 和 WebFont 的视觉密度差异
字体加载不是“引入就完事”，真正难的是让不同字体在尺寸、行距、字重上过渡自然。很多抖动问题，根源不在代码写法，而在没提前测好 fallback 字体的真实渲染表现。
