移动Web开发字体格式选择

Posted 2021-03-18 sunbey80

在做移动开发的时候，UI设计师会提供一些定制字体，来提高产品的视觉效果。对于前端开发来说，就需要考虑字体文件的兼容性和文件的大小，在尽量保证UI效果的情况下，兼容更多的浏览器，减少资源体积，使UI效果、兼容性、性能三者达到平衡。由于中文字体字符集的限制，最终字体包文件都会很大，这里不做讨论。下面主要介绍英文、数字符号场景下几种常见的字体格式。

 

.ttf
TrueType，是Type 1(Adobe公司开发)的竞品，由苹果公司和微软一起开发，是mac系统和window系统用的最广泛的字体，一般从网上下载的字体文件都是ttf格式，点击就能安装到系统上。

 

.otf
OpenType，TrueType是OpenType的前身，90年代微软寻求苹果的GX排版技术授权失败，被逼自创武功取名为TrueType Open，后来随着计算机的发展，排版技术上需要更加具有表现力的字体，Adobe和微软合作开发了一款新的字体糅合了Type 1和TrueType Open的底层技术，取名为OpenType。后来OpenType被ISO组织接受为标准，称之为Open Font Format（off）。

 

.eot
Embedded Open Type，主要用于早期版本的IE，微软根据OpenType做了压缩，重新取名为Embedded OpenType，是其专有格式，带有版权保护和压缩。ttf和otf字体在web端来说兼容相对较好，除IE和早期的ios safari和android不怎么支持外，其他浏览器都兼容都不错。但是由于ttf和otf体积过大，在桌面浏览器的时代还可以满足需求，到了移动浏览器的时代，动辄5MB、10MB的字体文件就显得过于庞大了。因此微软在OpenType的基础上进行了优化压缩，相比OpenType大大减少了体积，但是除了IE以外的浏览器都不太支持，因此也没有成为行业标准。

.woff
Web Open Font Format，可以看作是ttf的再封装，加入了压缩和字体来源信息，通常比ttf小40%。在2010年4月8日，Mozilla基金会、Opera软件公司和微软提交WOFF之后，万维网联盟发表评论指，希望WOFF不久能成为所有浏览器都支持的、“单一、可互操作的（字体）格式”。2010年7月27日，万维网联盟将WOFF作为工作草案发布。也是当前web字体的主流格式。

woff字体文件浏览器兼容性（2019.07.23）

.woff2
Web Open Font Format 2.0，相比woff最大的优化应该是加强了字体的压缩比。相同字体内容下，woff2比woff要小20%到30%。

woff2字体文件浏览器兼容性（2019.07.23）
 

结论
对比总结我们就会发现，尽管 .woff 文件由于历史原因，许多旧设备的浏览器并不支持，但是考虑当前兼容情况和文件大小的优势，在进行移动Web开发时，我们可以优先考虑使用.woff2，如果需要兼容更多的低版本设备，再考虑使用.woff。
————————————————
版权声明：本文为CSDN博主「black-heart」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/mrqingyu/article/details/96995760