最稳妥方式是在HTML的<head>中用<link>引入Google Fonts并添加display=swap参数，配合带系统后备字体的font-family兜底链，可有效缓解FOIT/FOUT问题。
怎么在 CSS 中正确引入 Google Fonts 字体
直接在 <head> 里用 <link> 引入最稳妥，比 @import 更早触发字体下载，避免 FOIT（Flash of Invisible Text）或 FOUT（Flash of Unstyled Text）加重。
- 访问 Google Fonts，选中需要的字体（比如
Inter或Roboto），点击右下角「+」添加到收藏，再点「Family Selected」获取嵌入代码 - 复制生成的
<link>标签（含display=swap参数），粘贴到 HTML 的<head>中，例如：<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
-
display=swap是关键：它让浏览器先用系统后备字体渲染文字，等自定义字体加载完成再替换，用户体验更平滑
如何在 CSS 中统一设置全局字体族
别只写 font-family: 'Inter'，必须带兜底链（fallback stack），否则字体加载失败或未命中时会退成无衬线默认字体，样式可能突变。
- 推荐写法：
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;} - 注意引号：Google Fonts 中带空格的字体名（如
'Open Sans'）必须加单引号；系统字体名不带空格可不加（但加了也无害） - 不要把所有字体都堆进
body—— 如果项目里有代码块、表格、按钮等需差异化排版的元素，后续用更具体的 selector 覆盖即可
为什么字体没生效？常见排查点
不是链接没加，就是 CSS 优先级或字体名拼写出了问题。
- 检查浏览器开发者工具的
Network面板：确认fonts.googleapis.com请求返回 200，且响应内容是 CSS 规则（含@font-face声明） - 检查
Computed面板里的font-family值，看最终解析出的字体名是否和@font-face中的font-family完全一致（大小写、空格、引号都要对） - 避免在多个地方重复声明
@font-face或覆盖font-family，尤其当使用了 CSS-in-JS 或组件库时，容易被更高优先级规则压掉 - 国内访问
fonts.googleapis.com可能慢或不稳定，可考虑用国内镜像（如https://fonts.loli.net），但要注意镜像是否同步最新版本，且部分字体可能缺子集
要不要预加载关键字体？
对首屏核心文本（比如标题、正文）用的字体，值得加 <link rel="preload">，但仅限 WOFF2 格式且只预载最关键的 1–2 个字重。
立即学习“前端免费学习笔记（深入）”；
- 示例（放在
<head>中，位置在<link>引入之后）：<link rel="preload" as="font" type="font/woff2" href="https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTe6ZSrsmV12v.woff2" crossorigin>
- 注意必须加
crossorigin属性，否则字体加载会被 CORS 策略阻止 - URL 不能手写，要从 Google Fonts 返回的 CSS 中提取真实的 WOFF2 地址（查看网络请求的响应头或源码），不同字重 URL 不同
- 预加载不是万能的：如果字体文件大、CDN 延迟高，反而可能抢占其他关键资源带宽
