网络字体(Web font)文件格式及兼容性说明

最新推荐文章于 2024-11-07 21:55:04 发布

转载最新推荐文章于 2024-11-07 21:55:04 发布 · 567 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5aefebb6f265da0ba60fb714

文章标签：

#移动开发 #ui

本文介绍了当前主要的网络字体(webfont)格式，包括WOFF、SVG、EOT、OTF/TTF等，并详细阐述了它们的特点及浏览器兼容性处理方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目前常用的字体格式

目前最主要的几种网络字体(web font)格式包括WOFF，SVG，EOT，OTF/TTF。

WOFF

WOFF是Web Open Font Format几个词的首字母简写。这种字体格式专门用于网上，由Mozilla联合其它几大组织共同开发。WOFF字体通常比其它字体加载的要快些，因为使用了OpenType (OTF)和TrueType (TTF)字体里的存储结构和压缩算法。这种字体格式还可以加入元信息和授权信息。这种字体格式有君临天下的趋势，因为所有的现代浏览器都开始支持这种字体格式。

SVG / SVGZ

Scalable Vector Graphics (Font). SVG是一种用矢量图格式改进的字体格式，体积上比矢量图更小，适合在手机设备上使用。只有iPhone上的Safari(4.1)之前的版本支持它。目前火狐、IE都不支持SVG字体格式。火狐推迟对SVG字体的支持，重点放在WOFF格式上。SVGZ是压缩版的SVG。

EOT

Embedded Open Type。这是微软创造的字体格式(是微软在15年前发明了网络字体@font-face)。这种格式只在IE6/IE8里使用。

OTF / TTF

OpenType Font 和 TrueType Font。部分的因为这种格式容易被复制(非法的)，这才催生了WOFF字体格式。然而，OpenType有很多独特的地方，受到很多设计者的喜爱。

字体兼容性

如上所述，在不同浏览器及尤其是IE的不同版本中，浏览器对于字体格式的支持都是不统一的，所以为了保证UI，需要使用字体兼容性处理，具体样例如下：

   @font-face {        
        font-family: 'YourWebFontName';        
        src: url('YourWebFontName.eot'); /* IE9 Compat Modes */        
        src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */             
        url('YourWebFontName.woff') format('woff'), /* Modern Browsers */             
        url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */             
        url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */   
    }
复制代码