Google Fonts的CSS与WOFF2文件不符：如何在运行时检测？

回答 #

1. 检测回退字体渲染的方案 #

目前没有直接的CSS API可以检测，但可以通过JavaScript实现：

• 尺寸对比法：使用CanvasRenderingContext2D.measureText()分别测量目标字符，以及一个已知会触发回退的字符（比如未被任何字体覆盖的生僻字）的宽度、高度。如果两者尺寸一致，说明目标字符使用了回退字体。
• 像素对比法：通过CanvasRenderingContext2D.getImageData()获取字符渲染后的像素数据，对比目标字体和回退字体渲染同一字符的像素差异，判断是否触发回退。该方法精度高但性能稍差。
• FontFaceSet辅助：先用document.fonts.check()确认目标字体已加载，再结合尺寸对比，排除字体未加载导致的回退情况。

2. Google Fonts的unicode-range偏差原因 #

是的，这是Google Fonts自动化子集划分流程导致的常见问题：
Google Fonts的unicode-range是基于Unicode标准区块设置的，而非逐个校验字体实际包含的字形。很多字体（尤其是扩展语言子集）在设计时并没有覆盖对应Unicode区块的所有字符，但Google Fonts为了简化分发逻辑、提升效率，直接按区块范围生成unicode-range，这就导致了范围中部分字符实际没有对应字形的情况。

内容的提问来源于stack exchange，提问作者Leo