直接答案:25 个首页中,16 个在前 3 个 CSS 里声明了 @font-face,合计 227 个 face;这些站点共引用 63 个唯一字体 URL,51 个可取,声明字节合计 145,002,817 B(约 145 MB),最大单文件 16.4 MB,5 个站点超过 10 MB。0 站为全部 face 设置 font-display,仅 3 站部分 face 用 swap,0 站 preload 字体。
本文解析首页前 3 个样式表中的 @font-face 声明,并对字体 URL 只读响应头读取字节;不保存字体正文,也不测真实渲染、FOIT 或 CLS。
方法:抓首页与前三个样式表
2026-11-08 10:40–10:42,对第 4 期 25 个首页各发一次 GET(超时 15 秒),提取 rel="stylesheet" 链接,按出现顺序最多抓 3 个 CSS(超时 12 秒),解析 @font-face 的 font-family、font-display、src URL 主机与文件格式。不请求字体文件,不判断字体是否真正用于首屏。
| 项 | 判定 | 边界 |
|---|---|---|
| @font-face | 前 3 个 CSS 中的声明 | 第 4 个及之后的 CSS 未检查 |
| swap | 至少一个 face 的 font-display 为 swap | 不代表全部 face 都设置 |
| 第三方主机 | src 主机与首页主机不同 | 不判断是否使用私有 CDN |
| woff2 | 任一 src 以 .woff2 结尾 | 不测实际传输体积 |
结果:16/25 有 @font-face,face 数高度集中
| 指标 | 站点数 / 数值 | 说明 |
|---|---|---|
| 有 @font-face | 16 | 9 站没有,其中 3 站没有外链 CSS |
| face 总数 | 227 | 16 站合计 |
| 每站 face 中位数 | 4 | E17 为 164,明显拉高总数 |
| family 中位数 | 3.5 | E17 有 153 个 family |
E17 的 164 个 face 与 153 个 family 更像图标/字形库,而不是正文字体;这类资源对首屏价值有限,却会增加 CSS 体积与字体请求。其余站点多在 1–14 个 face 之间。
字体文件:63 个 URL,合计 145 MB
从 15 个站点的前 3 个 CSS 中提取 63 个唯一字体 URL(每站最多 8 个),带首页 Referer 请求:51 个 200、10 个 404、2 个 502;13 个站点能读到 Content-Length。声明文件字节合计 145,002,817 B,最大单文件 16,353,128 B(E14);5 个站点超过 10 MB(E09、E14、E19、E22、E23),其中 E22 约 63 MB。
| 项 | 数值 | 说明 |
|---|---|---|
| 唯一字体 URL | 63 | 15 个站点,每站最多 8 个 |
| HTTP 200 / 404 / 502 | 51 / 10 / 2 | 带首页 Referer 请求 |
| 可读到字节的站点 | 13 | Content-Length 存在 |
| 声明字节合计 | 145,002,817 B | 约 145 MB,不含未声明的字体 |
| 最大单文件 | 16,353,128 B | E14,约 16.4 MB |
| 超 10 MB 的站点 | 5 | E09、E14、E19、E22、E23 |
声明字节不等于首屏流量:浏览器按 unicode-range 与实际用字只取需要的文件,未使用的 face 不会请求。但 10 MB+ 的单文件仍说明字体没有做子集化或按字符集拆分,首次命中时需要完整取回;对移动网络与首屏时间都是风险。
font-display:没有站点全量设置,只有 3 站部分 swap
| font-display | 站点数 | 说明 |
|---|---|---|
| 全部 face 都设置 | 0 | — |
| 至少一个 face 为 swap | 3 | E17、E22、E23 |
| 至少一个 face 缺失 | 16 | 所有有 @font-face 的站点 |
没有 font-display 时,浏览器可能先隐藏文字直到字体加载完成(FOIT);swap 会先用回退字体显示。3 个站点只给部分 face 设了 swap,其余 face 仍走默认行为,说明字体策略没有统一到样式表层面。
第三方、格式与 preload:7 站第三方,5 站 woff2,0 站 preload
| 项 | 站点数 | 说明 |
|---|---|---|
| 第三方字体主机 | 7 | 字体域名与首页不同 |
| woff2 | 5 | 其余站点未见 woff2 |
| preload 字体 | 0 | HTML 中没有 as="font" 的 preload |
第三方字体主机意味着额外的 DNS/TLS 与连接成本;woff2 只有 5 站,可能是大量使用系统字体或图标字体。preload 为 0 并不必然错误:如果字体不阻塞首屏,preload 反而会抢带宽;但首屏关键字体可以单独评估。
对验收的启示
- 为每个 @font-face 写 font-display。 16 个有字体的站点没有一个全量设置;统一写
swap或optional能减少 FOIT。 - 优先 woff2。 只有 5 站出现 woff2;新配置应同时提供 woff2 与回退格式。
- 控制 face 数量。 E17 的 164 个 face 需要审查:图标字体能否改成 SVG,字重能否收敛。
- 第三方字体要单独计时。 7 站引用外部字体主机,DNS/TLS 与可用性都增加一个依赖。
- preload 按首屏评估。 0 站使用;若字体阻塞首屏,可对 1 个关键字体加 preload,并配合
crossorigin。企业官网验收可参考网站建设服务。 - 先看字节再看 face 数。 E14 单文件 16.4 MB、5 站合计超 10 MB;CJK 字体应做子集化或按 unicode-range 拆分。
局限
- 只看前 3 个 CSS:后续样式表可能还有 @font-face;本文不判断是否遗漏。
- 不下载字体正文:字节来自 Content-Length;不测实际加载、FOIT/CLS 或浏览器最终使用的字体。
- 3 站无外链 CSS:E18、E20、E25 没有可解析的样式表,字体情况未知。
- 单次快照:2026-11-08 10:40–10:42;CDN 与页面改版可能改变结果。
- 25 站 pilot:不外推行业。
- 字节口径有限:只取前 3 个 CSS、每站最多 8 个字体 URL;声明字节不等于实际下载;10 个 404 与 2 个 502 未逐个归因。
数据与复算
匿名数据:equipment-homepage-font-delivery-2026.csv(25 行 × 12 列:样式表、face/family 数、swap、第三方主机、woff2、preload)。字体字节:equipment-homepage-font-bytes-2026.csv(25 行 × 10 列:字体 URL 数、200/非 200、可读字节站点、合计字节、最大单文件、第三方)。仓库内为 docs/research/2026-11-homepage-font-delivery.csv 与 2026-11-homepage-font-bytes.csv。
解析:scripts/font_delivery_probe.py;单元测试 scripts/test_content_font_delivery.py(9 项,无网络)。运行:
python -m unittest scripts.test_content_font_delivery
配套:首页静态资源清单 pilot、首页性能代理 pilot、首页缓存、压缩与重访 pilot、首页阻塞资源 pilot。
数据来源与口径
- 样本:第 4 期 25 个首页(同一批 sample_id)。
- 抓取:2026-11-08 10:40–10:42 Asia/Shanghai,串行,站间 0.5 秒,超时 15/12 秒。
- CSS:按 HTML 中出现顺序取前 3 个
rel="stylesheet"链接。 - 指标:@font-face 的 family/display/src 主机/格式;不请求字体文件。
- 字体字节:2026-11-08 11:44–11:46;从前 3 个 CSS 取字体 URL(每站最多 8 个),带首页 Referer 请求,只读响应头与 Content-Length。
常见问题
font-display 缺失会怎样?
浏览器可能先隐藏文字直到字体加载完成(FOIT);swap 会先用回退字体显示,再替换成自定义字体。
为什么 E17 有 164 个 @font-face?
主要是图标字体与多字重/多字形集合;图标类字体通常可以用 SVG 或内联图标替代,减少请求与体积。
只有 5 站用 woff2 说明什么?
其余站点可能用系统字体、图标字体或旧格式;woff2 压缩率更高,新配置应优先使用。
preload 字体有必要吗?
首屏关键字体可以 preload 以减少延迟;是否必要取决于字体是否阻塞首屏。本次 0 站使用。
25 个站点能代表行业吗?
不能。这是第 4 期同一批装备企业官网的 pilot,只描述这 25 个首页。
数据能复核吗?
可以。样式表口径 25 行 × 12 列、字节口径 25 行 × 10 列;font_delivery_probe.py 有 13 项离线单测。
145 MB 会全部下载吗?
不会。浏览器按 unicode-range 与实际用字只请求需要的字体文件;但 10 MB+ 的单文件仍说明没有做子集化或拆分,首次命中时要完整取回。