在前端开发中，字体加载往往会影响页面的首屏渲染速度与用户体验。

最近在LINUX DO社区交换友链时，佬友提出初次加载慢的问题，另有佬友刚好使用相同主题并且进行了问题的探寻。

佬友提出将字体保存在服务器，修改字体地址链接以提高访问速度，因为字体源服务器速度限制，加之地区网络差异，体验不一。

随后，跟随佬友的步伐，我也开展了自己对问题的探索，我所使用的博客主题需要引入 LXGW WenKai 字体，在字体详情页发现有两种不同的加载写法。我通过AI的帮助，整理了这两种方式的区别，供大家参考。

方式一：直接引入 stylesheet

<!-- 建立预连接，减少延迟 -->
<link rel="preconnect" href="https://fontsapi.zeoseven.com" crossorigin />

<!-- 直接加载 CSS -->
<link
  rel="stylesheet"
  href="https://fontsapi.zeoseven.com/292/main/result.css"
  onerror="this.href='https://fontsapi-storage.zeoseven.com/292/main/result.css'"
/>

特点

1. rel="preconnect"
   提前建立 TCP + TLS 连接，加快字体服务器的请求速度。

2. 直接引入 stylesheet
   浏览器会立即下载并解析 CSS，并在完成之前阻塞页面渲染。

3. 错误回退
   如果主站加载失败，会自动切换到备用地址。

优点

• 字体样式能第一时间生效，避免了字体闪烁问题（FOIT/FOUT）。

缺点

• 会阻塞首屏渲染，影响加载速度，尤其是字体文件较大或网络较差时。

方式二：预加载 + 动态应用

<link rel="preload" as="style" crossorigin
  href="https://fontsapi.zeoseven.com/292/main/result.css"
  onload="this.rel='stylesheet'"
  onerror="this.href='https://fontsapi-storage.zeoseven.com/292/main/result.css'" />

<noscript>
    <link rel="stylesheet" href="https://fontsapi.zeoseven.com/292/main/result.css" />
</noscript>

特点

1. rel="preload"
   提前请求 result.css 文件，但不会立即阻塞渲染。

2. onload 动态切换
   文件下载完成后，JS 会将 rel 改为 stylesheet，这时字体才被应用。

3. <noscript> 回退
   兼容用户禁用 JS 的情况，仍然能正常加载字体。

优点

• 避免了 CSS 阻塞，提高首屏渲染速度。

• 更好的性能优化手段，适合现代 Web。

缺点

• 字体应用存在延迟，可能导致页面初始渲染时字体短暂闪烁。

• 代码相对复杂，需要额外处理无 JS 情况。

对比总结

使用建议

• 如果你的页面对首屏加载速度要求高（如博客、内容型网站），推荐使用 方式二（preload）。

• 如果你更在意字体体验完整，希望避免任何闪烁，推荐使用 方式一（直接 stylesheet）。

• 实际项目中，也可以结合 字体显示策略（font-display: swap 等） 进一步优化体验。

总结

字体加载方式看似只是 <link> 标签的区别，但却直接影响页面性能与用户体验。

• 方式一：加载可靠但可能阻塞首屏。

• 方式二：首屏更快，但字体可能延迟应用。

合理选择方案，才能在性能与体验之间找到平衡。