最稳妥方式是在HTML的中用引入Google Fonts并添加display=swap参数，配合带系统后备字体的font-family兜底链，可有效缓解FOIT/FOUT问题。

怎么在 CSS 中正确引入 Google Fonts 字体

直接在 里用 <link> 引入最稳妥，比 @import 更早触发字体下载，避免 FOIT（Flash of Invisible Text）或 FOUT（Flash of Unstyled Text）加重。

• 访问 Google Fonts，选中需要的字体（比如 Inter 或 Roboto），点击右下角「+」添加到收藏，再点「Family Selected」获取嵌入代码
• 复制生成的 <link> 标签（含 display=swap 参数），粘贴到 HTML 的 中，例如：

  <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 优先级或字体名拼写出了问题。

CDP浏览器大师

CDP浏览器大师：通过Chrome DevTools Protocol驱动已登录浏览器实现自动化任务，解决反爬封号、选择器失效、SPA路由难导航、固定sleep不准四大痛点。核心能力包括UA伪装、WebGL/Canvas指纹混淆、智能等待、动态选择器以及可视化调试。

下载

• 检查浏览器开发者工具的 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 个字重。

立即学习“前端免费学习笔记（深入）”；

• 示例（放在 中，位置在 <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 延迟高，反而可能抢占其他关键资源带宽

实际项目里，字体统一真正的难点不在引入，而在「确保所有文本节点都走同一套 font-family 链」以及「应对字体加载过程中的视觉抖动」。这两个问题比选什么字体更影响最终体验。