SEO 百科

Web 字体

本页目录

Web 字体

Web 字体 是通过 @font-face 把自定义字体文件下载到浏览器，再用它显示网页文字的做法[2]。做 SEO 的人关心它，因为字体文件会拖慢首屏，而首屏速度关系到最大内容绘制（LCP）这类体验指标。

字体如何进入页面

@font-face 声明字体的名字和文件地址，font-family 再把文字指向它[2]。浏览器遇到用到该字体的文字时，才去下载文件。字体文件通常放在自己的服务器或第三方 CDN 上。

@font-face {
  font-family: "MyFont";
  src: url("/fonts/myfont.woff2") format("woff2");
  font-display: swap;
}
body {
  font-family: "MyFont", system-ui, sans-serif;
}

加载过程与首屏

font-display 决定字体没到时文字怎么显示，它把时间线分成阻塞、交换、失败三段[1]。阻塞期文字不可见，交换期先用后备字体显示，失败期则一直用后备字体。

字体没到就渲染空白，会让首屏出现一段读不出文字的时间，LCP 随之变差。正文是首屏的主要元素，它的可见时间受字体左右。

font-display 的取值

取值 表现
auto 由浏览器自己决定
block 短暂阻塞，之后无限交换
swap 极短阻塞，之后无限交换
fallback 极短阻塞，短暂交换
optional 极短阻塞，不交换

正文适合用 swap，文字先以后备字体显示，字体到了再换，访客始终看得到内容[1]。

字体子集与体积

中文字体动辄几 MB，整包下载会明显拖慢页面。unicode-range 可以把字体文件按字符区间切开，浏览器只下用到的那一片[3]。

子集化是同一思路的另一条路，只留下页面用到的字符，重新打包成一个更小的文件。

用量也有参考。HTTP Archive 的 2025 年报告显示，约 88% 的页面会请求字体文件[5]，字体已经是很普遍的一项资源。

与抓取和收录的关系

字体不是正文，不会被收录。它对收录的影响来自加载速度这一个环节。

收录从抓取开始，百度把抓取概括为从互联网抓取网页、建立索引数据库、把索引库中的数据展现给用户[4]。抓取回来还要渲染，字体晚到会推迟这一步。

常见误用

  • 一次引入多套字重，字体文件成倍增加。
  • 正文用 block，首屏先白一段时间。
  • 整包引入中文字体，不做子集。
  • 依赖第三方字体服务，源站要等外部响应。

附录

参见

参考资料

官方（境外）

  1. 《font-display》，MDN Web 文档，2025-11-06 更新。
  2. 《@font-face》，MDN Web 文档，2025-11-06 更新。
  3. 《unicode-range》，MDN Web 文档，2025-09-02 更新。

官方（国内）

  1. 《百度搜索的工作原理》，百度搜索资源平台，2023-12-21 更新。

第三方

  1. 《Fonts》，HTTP Archive《Web Almanac》，2026-01-15。

外部链接

无。