根本原因是DNS解析卡在第一环，应仅对fonts.googleapis.com和fonts.gstatic.com添加dns-prefetch，href必须为//fonts.googleapis.com或https://fonts.gstatic.com等纯域名格式，且置于head靠前位置。
fonts.googleapis.com 加载缓慢，根本原因不是字体本身大，而是 DNS 解析卡在了网络链路第一环——尤其在国内，该域名解析常超时、失败或被重定向。加 <link rel="dns-prefetch"> 能提前触发 DNS 查询，但**只对真正会用到的域名有效，且必须写对格式，否则浏览器直接忽略**。
哪些域名该加 dns-prefetch（且只加这些）
只加页面里明确会请求、但又不随 HTML 一起加载的第三方域名：
-
fonts.googleapis.com—— @import 或<link rel="stylesheet">指向它，但 CSS 是异步加载或延迟执行 -
fonts.gstatic.com—— 字体文件实际从这个域名下发，和上面是配套的，必须一起加 - 你确认会通过 JS 动态加载 Google Fonts 的场景（比如用户点按钮才加载某套字体）
别加：your-site.com（主站已解析）、fonts.googleapis.com/css?family=...（带路径，浏览器不认）、http://fonts.googleapis.com（协议不匹配，可能降级失败）。
href 写法错误是失效最常见原因
浏览器只提取 href 中的主机名部分做 DNS 查询，其余全丢弃。所以：
Google Workspace 自动化，支持 Gmail、日历、Drive、表格，可通过服务账户或 OAuth 完成读取、写入、发送并管理整个 Google 套件。
- ✅ 正确：
<link rel="dns-prefetch" href="//fonts.googleapis.com"> - ✅ 正确：
<link rel="dns-prefetch" href="https://fonts.gstatic.com">（显式 HTTPS 更稳妥） - ❌ 错误：
<link rel="dns-prefetch" href="https://fonts.googleapis.com/css?family=Roboto">（含路径，被忽略） - ❌ 错误：
<link rel="dns-prefetch" href="fonts.googleapis.com">（缺协议或双斜杠，当成相对路径）
注意：如果页面是 HTTP 协议，//fonts.googleapis.com 会尝试 HTTP 连接，而该域名只支持 HTTPS，结果就是 DNS 查到了，但后续请求 400 或失败——这种情况下，应改用 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>，并确保加 crossorigin。
加在哪？加几个？Safari 用户要特别注意
<link rel="dns-prefetch"> 必须放在 <head> 里，且越靠前越好，最好在 <meta charset> 之后、首个外部资源（如 <link rel="stylesheet">）之前。
数量控制在 4–6 条以内。Chrome 会静默丢弃多余项；Safari 更保守，常等到页面空闲甚至用户 hover 链接后才真正发起查询——这意味着如果你依赖它加速首屏字体渲染，大概率落空。
真正容易被忽略的是：DNS 预解析结果默认缓存 60–300 秒，用户打开页面后等半分钟再点字体相关操作，解析可能已过期，又得重查。
