利用icomoon的若干图标(10多个)生成了一个字体压缩包,解压之后发现fonts文件夹里有4个文件,总大小接近20kb,感觉尺寸有点大的离谱,于是尝试了一下挨个删除任一文件,结果发现无论保留ttf或是woff文件,图标都可以正常显示(windows)。查询了一下这些后缀名,发现这4个都是字体文件,由于不同的系统与浏览器支持的格式不同,为了确保兼容性才一股脑放了上去。
官方提供的css格式文件如下(摘录):
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?ga48ud');
src: url('fonts/icomoon.eot?ga48ud#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?ga48ud') format('truetype'),
url('fonts/icomoon.woff?ga48ud') format('woff'),
url('fonts/icomoon.svg?ga48ud#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
TrueType字体(TTF)
TrueType字体 PostScript格式是由Apple和Microsoft开发的,作为对PostScript字体格式的响应。TTF长期以来一直是Mac和Windows操作系统上最常见的字体格式。所有主流浏览器都支持它。但是,IE8不支持TTF;而从IE9开始,它只被部分支持,因为字体必须设置为“可安装”。
TTF允许最基本类型的数字版权管理-一个可嵌入的标志,指定作者是否允许将字体文件嵌入PDF文件和网站。有一些工具允许修改此标志,这是TTF格式的主要问题之一。另一个缺点是TTF/OTF字体没有压缩,因此它们的文件大小较大。
OpenType(OTF)
OpenType 是TTF的演变。这是Adobe和Microsoft共同努力的结果。OpenType字体在一个组件中包含屏幕和打印机字体数据。OTF有几个独特的功能,包括支持多个平台和扩展字符集。OTF字体可用于Macintosh和Windows操作系统。
OTF还允许存储多达65,000个字符。这个额外的空间使设计师可以自由地添加附加组件,如小型大写字母,旧风格的数字,替代字符和其他以前必须作为单独字体分发的额外内容。
嵌入式开放式(EOT)
EOT字体 是微软设计的用于网络的字体。这是一个尝试,以解决TTF和OTF的版权缺陷时,在网络上发布。EOT使用Microsoft工具从现有的TTF/OTF字体创建字体。压缩和子集化使字体文件变小。子集提供了一些版权保护,但EOT也使用加密来进一步保护。听起来不错?是的,但EOT格式只支持Internet Explorer。
Web开放字体格式(WOFF)
WOFF是为了生活在网络上而创建的。它是Mozilla基金会、微软和Opera Software合作的结果。因为字体是压缩的,所以加载速度更快。元数据允许在字体文件中包含许可证数据,以解决版权问题。它是万维网联盟的推荐标准,显然是字体格式的未来。
WOFF2是下一代WOFF。W0FF2格式提供比原始W0FF高30%的平均压缩增益。因为它仍然只是一个推荐的升级,它没有WOFF的广泛支持。
可缩放矢量图形字体(SVG)
SVG字体 使用SVG的“font”元素定义。这些字体包含字形轮廓作为标准SVG元素和属性,就好像它们是SVG图像中的单个矢量对象一样。SVG字体最大的缺点是缺少字体提示。字体提示是嵌入的额外信息,用于呈现具有质量和易读性的小字体。此外,SVG不适合正文文本。由于Safari、Safari移动的和Chrome上的文本选择是中断的,因此您无法选择单个字符、单词或任何自定义选择。只能选择整行或整段文本。
总结
所以,fonts文件夹中的4个文件,实际上只是同一个内容的不同格式,单个文件包含10多个图标时文件大约4~5k,感觉这样的体积才符合它包含的内容。当不需要考虑兼容性的问题时,也可以适当减少一些格式以降低文件的体积。