字体兼容性

Web 字体格式在各浏览器中的兼容性

不同的 Web 字体格式在各种浏览器中有着不同的支持程度。了解这些兼容性差异对于确保您的网页字体能够在所有用户的设备上正确显示至关重要。

为了获得最佳的跨浏览器兼容性，建议在 @font-face 声明中提供多种字体格式。

浏览器兼容性表

格式ChromeFirefoxSafariOperaEdgeIE
TTF/OTF✅3.6+✅10.6+✅
WOFF5+3.6+5.1+11.6+✅9+
WOFF236+39+23+14+❌
EOT❌❌❌❌❌6+
SVG4-37❌3.2+9.5-24❌❌
✅完全支持
❌不支持

参考

字体格式详情

TTF/OTF (TrueType Font)

TrueType 是最常见的字体格式之一，最初由苹果公司开发。它在现代浏览器中有良好的支持，但与压缩的网页字体格式相比，文件体积较大。

WOFF (Web Open Font Format)

Web Open Font Format 是专为网页使用而开发的。它本质上是 TrueType 或 OpenType 字体的压缩容器，在保持良好浏览器兼容性的同时提供更快的加载速度。

WOFF2 (Web Open Font Format 2)

WOFF2 相比 WOFF 提供了更优的压缩率（文件体积约小 30%），使其成为网页使用的最高效格式。它被所有现代浏览器支持，但不被旧版本浏览器支持。

EOT (Embedded OpenType)

Embedded OpenType 由微软开发，仅被 Internet Explorer 支持。它是第一种启用网页字体的格式，但现在被视为遗留技术。

SVG (Scalable Vector Graphics Font)

SVG 字体允许使用 SVG 的路径数据定义字体，但它们已被弃用，大多数浏览器不再支持。它们主要用于旧版本 iOS Safari 的兼容性。

推荐实现方式

为了获得最佳的跨浏览器兼容性，我们建议使用以下带有备选链的 @font-face 声明：

@font-face {
  font-family: 'FontName';
  src: url('webfont.eot'); /* IE9+ Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super modern browsers */
       url('webfont.woff') format('woff'), /* Modern browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#FontName') format('svg'); /* Legacy iOS */
}

需要转换字体格式？

了解兼容性后，现在就来转换您的字体文件，确保在所有浏览器中都能完美显示！

开始转换字体
字体格式兼容性大全｜TTF、OTF、WOFF、WOFF2、EOT 浏览器支持情况 - Fonto