Web 字体优化建议器 - 分析字体加载对性能的影响

font-display是CSS @font-face规则中的一个属性，用于控制字体加载过程中的显示行为。它决定了自定义字体完全加载之前，浏览器如何处理文本的渲染。在字体加载期间，浏览器靠两个选择：FOIT（Flash of Invisible Text，文本不可见）或FOUT（Flash of Unstyled Text，显示回退字体）。错误的设置（如默认的auto）可能导致文本长时间不可见，严重影响LCP（Largest Contentful Paint）和用户体验。使用swap可确保文本立即可见，避免空白页面。

WOFF2（Web Open Font Format 2）是目前Web字体的最佳选择。相比WOFF平均减少约30%的文件大小，比TTF减少约50-70%。它使用Brotli压缩算法，所有现代浏览器（Chrome、Firefox、Safari、Edge）均已支持。更小的文件意味着更快的下载和解析速度。推荐在@font-face中将WOFF2放在src列表的最前面，浏览器会优先使用它。工具会自动检测字体格式并给出升级建议。

preconnect提前建立与字服务器的连接（DNS + TCP + TLS），适用于Google Fonts等CDN字体，减少连接建立延迟约100-300ms。preload强制浏览器优先下载特定资源，适用于关键字体确保渲染时已可用。最佳实践：对Google Fonts使用preconnect：link rel="preconnect" href="https://fonts.gstatic.com" crossorigin；对自托管关键字体使用preload：link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin。注意不要预加载所有字体，只预加载首屏渲染所需的关键字体。

字体子集化是从字体文件中提取仅包含所需字符的子集，大幅减少文件体积。对于中文、日文等大字符集字体尤为重要，完整中文字体通常5-15MB，子集化后可降至150-500KB（WOFF2格式）。推荐工具：glyphhanger命令行工具分析实际使用字符、Font Squirrel Generator在线工具、Google Fonts通过text=参数请求特定子集、unicode-range在CSS中声明覆盖范围。

当自定义字体加载完成后替换回退字体时，如果两种字体的度量指标不同，文本尺寸会发生变化，导致CLS。降低CLS的策略：使用font-display: swap配合度量接近的回退字体；使用size-adjust属性微调回退字体尺寸；使用ascent-override、descent-override等字体度量覆盖属性减少布局偏移；预加载关键字体缩短回退字体显示的时间窗口。

可变字体将多个字重、宽度、斜体等合并到单一文件中，通过CSS参数动态调整字体外观。性能优势包括：减少HTTP请求，一个文件替代多个传统字体文件；总文件体积更小，通常比多个独立字重文件总和小30-50%；排版更灵活，可精确设置字釖如437而非仅限于固定值。Google Fonts支持可变字体，在URL中添加wdth,wght@参数即可使用。本工具会检测可变字体使用并给出优化建议。

两者各有优势。Google Fonts CDN优势：全球CDN加速，用户可能已缓存常见字体，自动提供最优格式和子集，零维护成本。自托管优势：减少DNS查询和连接建立，完全控制缓存策略和加载行为，更好的隐私保护，可使用preload进行更激进优化。建议：对性能要求极高的网站，自托管关键字体+preload是最佳选择；一般网站使用Google Fonts+preconnect即可获得良好性能。工具会根据字体来源推荐对应的加载策略。

好的字体回退方案能减少CLS并改善加载体验：匹配x-height，选择与自定义字体x-height相近的回退字体；使用系统字体栈如-apple-system, BlinkMacSystemFont, Segoe UI, Roboto等；利用size-adjust微调回退字体尺寸；使用浏览器DevTools的网络节流功能模拟慢速网络测试字体切换效果。示例：使用Montserrat时，可用Arial, Helvetica, sans-serif作为回退，它们的几何特征较为接近。工具会自动分析并推荐最佳回退字体配置。