Google Fonts需preconnect两个域名：fonts.googleapis.com（获取CSS，无需crossorigin）和fonts.gstatic.com（下载字体，必须带crossorigin），否则连接无法复用或触发CORS错误。
对第三方字体，rel="preconnect" 能明确减少连接耗时，但只在配对正确、时机得当的前提下生效——漏写 crossorigin、连错域名、或提前太多，它就等于没写。
为什么 Google Fonts 要 preconnect 两个域名？
Google Fonts 是双源架构：fonts.googleapis.com 提供 CSS（含 @font-face 规则），fonts.gstatic.com 才托管实际字体文件（如 .woff2）。浏览器必须先请求前者拿到规则，再根据规则去后者下载字体。
-
preconnect到fonts.googleapis.com：加速获取 CSS，无需crossorigin（它返回的是同域可读的 CSS） -
preconnect到fonts.gstatic.com：必须带crossorigin，否则后续字体请求无法复用该连接，甚至触发 CORS 错误 - 只连一个？那另一个仍要走完整 DNS+TCP+TLS，白丢一半优化
crossorigin 属性怎么写才不被忽略？
HTML 规范只接受空属性值，不是布尔开关，也不是字符串选项。写错就等于没写，浏览器直接跳过这条 preconnect。
- ✅ 正确：
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - ❌ 错误：
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">（空字符串） - ❌ 错误：
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">（带等号会被解析为无效属性） - ⚠️ 注意：即使目标是 HTTPS 同协议，也必须显式加
crossorigin，因为浏览器把带/不带它的连接视为不同池子
怎么验证 preconnect 真生效了？
别只看 Network 面板有没有“preconnect”条目——那只是提示发出了，不代表连接被复用。关键看资源是否真正受益。
立即学习“前端免费学习笔记（深入）”；
- 在 Chrome DevTools → Network → 找一个来自
fonts.gstatic.com的.woff2请求 → 点开 Timing 标签页 - 如果
Connection Start时间明显早于Request Start（比如早 100ms+），说明连接已就绪 - 更直接：过滤 Initiator =
preconnect，确认有对应条目；再检查同一域名下其他资源的 Priority 是否为Highest或High - 如果字体请求的 Priority 是
Low，大概率是crossorigin漏了，或连到了错误协议（比如用了http://）
最容易被忽略的点是：预连接必须和真实资源请求在**同一导航周期内发生**。如果用户刚打开页面，你 preconnect 了 fonts.gstatic.com，但首屏 JS 却延迟 2 秒才触发字体加载，那这个连接可能已被浏览器关闭或回收——它不是永久保持的。所以只对「几秒内必用」的域名加，且确保 preconnect 在 <head> 最前面，比任何 <link rel="stylesheet"> 都靠前。
