移动Web开发字体格式选择

在做移动开发的时候,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

猜你喜欢

转载自www.cnblogs.com/sunbey/p/12148647.html