移动Web开发字体格式选择（附.woff\.woff2 兼容性）

在做移动开发的时候，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字体的主流格式。

.woff2

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

结论

对比总结我们就会发现，尽管 .woff 文件由于历史原因，许多旧设备的浏览器并不支持，但是考虑当前兼容情况和文件大小的优势，在进行移动Web开发时，我们可以优先考虑使用.woff2，如果需要兼容更多的低版本设备，再考虑使用.woff。

参考资料：

网页字体优化

WOFF 2.0 评估报告

浏览器兼容性查询

Web开放字体格式Wiki

2018年的@font-face