首页>工作相关>icomoon字体格式:TTF,WOFF,EOT&SVG

icomoon字体格式:TTF,WOFF,EOT&SVG

利用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,感觉这样的体积才符合它包含的内容。当不需要考虑兼容性的问题时,也可以适当减少一些格式以降低文件的体积。

标签: 文件格式

移动端可扫我直达哦~

推荐阅读

convert 2023-03-28

如何打印包含密码保护的pdf文件

需要打印一压缩包文件,合同啊违约责任之类的,word文档都没有什么问题,有一个pdf文件直接按ctrl+p打印没有反应,pdf阅读器上打印与截图按钮都是灰的。拖入coreldraw试了一下,显示文件有加密,心里不禁吐槽,你又不给打印又...

工作相关 文件格式

convert 2022-10-22

谷歌webp图片格式的转换

经常从网上搜索一些素材图片,发现百度以及360上下载的图片很多都变为了webp格式,windows10自带画图软件无法查看与编辑,较老版本的photoshop也不支持这种格式。webp概况由谷歌于2010年推出的新一代图片格式,在压缩...

工作相关 文件格式

convert 2022-10-13

中文文件名引起cloudconvert转换失败一例

朋友发过来一个cad文件,说是几个配件的图纸,让帮忙打印一下。其实自己工作中很少用到cad,也很久没有更新cad软件的版本,所以毫无悬念的没有能够成功打开。在博客中曾经介绍过一个文件转换的英文站点,支持丰富的格式,也不需要注册或者关注...

工作相关 文件格式

convert 2022-10-12

在线压缩pdf文件的工具网站

同事做了一个pdf格式的样本,成品大概有40多m,考虑这么大的尺寸发送给客户容易发送失败,甚至有可能被拒收,所以想压缩的稍微小一些。打包压缩文件有很多种工具,但pdf压缩还真不常使用,手头也没有现成的工具。在线压缩工具尝试了搜索结果中...

工作相关 文件格式

convert 2022-10-11

iphone照片后缀名导致博客图片不显示

这个博客的主题是博主自己根据自带的twentyten主题修改的,因为不太清楚如何处理不同种类的图片,暂时对于站点的图片以及缩略图,都尽量选择了jpg格式。某次上传了几张图片,发现缩略图无法正常显示,格式是jpg的无误,在电脑上也是可以...

工作相关 文件格式

convert 2022-10-07

网页设计中的SVG文件

SVG是一种可缩放矢量图形,这是一种独特的图像格式。与其他图片类型不同,SVG 不依赖特定的像素来构成我们所看到的图像,与之相反,它们使用“矢量”数据。SVG图形的优点支持缩放:用户可以任意缩放图像显示,而不会破坏图像的清晰度、细节等...

工作相关 文件格式

convert 2022-09-29

如何将Pdf转为Word

并不太恰当的标题抛开具体使用场景谈效果是不合时宜的,一般有将Pdf转化为Word文档需求的,其初衷往往是希望在保留其排版的同时,还能够对文字部分进行编辑。一方面当前的转换技术大部分使用了Ocr识别,对文字识别倒是能做到精确匹配,但对于...

工作相关 文件格式

convert 2022-09-28

cad文件在线转换格式

CAD是工作中经常遇到的文件格式,因为CAD软件版本更新迭代比较快,而新版本默认的保存格式又无法被旧版本识别,所以经常会出现明明电脑上安装了CAD,却无法打开客户发送过来的相关图纸文件的情况。如果能直接联系到制图人员,那当然是极好的,...

工作相关 文件格式