font-display
CSS @font-face规则中的属性,用于控制字体加载过程中的显示行为。它决定了自定义字体完全加载前,浏览器如何渲染文本,是避免FOIT和FOUT的关键手段。本工具会根据字体特点推荐最佳的font-display策略。
WOFF2
Web Open Font Format 2的缩写,是目前Web字体的最佳格式。使用Brotli压缩算法,相比WOFF平均减少约30%的文件大小。所有现代浏览器均已支持,是字体优化的首选格式。工具会检测字体是否使用了WOFF2并给出建议。
FOIT
Flash of Invisible Text,文本不可见闪现。在自定义字体加载完成前,浏览器隐藏文本的现象。默认的font-display策略可能导致文本长时间不可见,严重影响LCP指标和用户体验。本工具会识别FOIT风险并推荐swap策略。
FOUT
Flash of Unstyled Text,无样式文本闪现。浏览器先用回退字体渲染文本,自定义字体加载完成后再替换的现象。虽然有图形跳动,但文本始终可见,体验通常优于FOIT。工具会评估CLS风险并提供减缓建议。
CLS
Cumulative Layout Shift,累积布局偏移。Core Web Vitals中的重要指标,衡量页面视觉稳定性。字体切换时度量差异是CLS的常见原因之一。本工具会分析字体指标差异,并提供size-adjust等CSS属性建议来降低CLS。
@font-face
CSS@font-face规则允许开发者定义自定义字体。通过src属性指定字体文件路径,然后在其他CSS规则中通过font-family引用。工具会分析字体的@font-face配置,检查是否包含WOFF2格式、是否配置了合理的font-display策略。
preconnect
HTML标签指示浏览器提前与目标域名建立连接(DNS + TCP + TLS)。适用于Google Fonts等CDN字体,可减少连接建立延迟约100-300ms。工具会根据字体来源自动生成对应的preconnect标签。
preload
HTML标签强制浏览器优先下载特定资源。适用于首屏渲染所需的关键字体,确保渲染时字体已可用。工具会识别关键字体并生成preload配置,同时提示不要过度预加载。
字体子集化
从字体文件中提取仅包含所需字符的子集,大幅减少文件体积。对于中文等大字符集尤为重要,完整中文字体通常5-15MB,子集化后可降至150-500KB。工具可分析字符集使用情况并推荐unicode-range等按需加载方案。
可变字体
Variable Fonts将多个字重、宽度、斜体等变体合并到单一文件中,通过CSS参数动态调整。相比多个独立字重文件,可减少HTTP请求并节省30-50%的总体积。工具会检测可变字体使用情况并给出相应建议。
自托管字体
将字体文件放在自己的服务器上,而非使用CDN。优势包括减少DNS查询、完全控制缓存策略、更好的隐私保护。工具会分析字体加载来源,并根据项目需求推荐是使用自托管还是CDN。对于性能要求极高的网站,自托管关键字体并配置preload是最佳选择。
size-adjust
CSS新属性,允许微调回退字体的尺寸以匹配自定义字体。配合ascent-override、descent-override等字体度量覆盖属性,可有效减少字体切换时的CLS。工具会根据分析结果生成对应的CSS属性建议,帮加开发者精确调整回退字体大小。
UD5工具箱