关于fonticon的一些东西

Posted 2021-02-16 ginkgo-leaves

项目中的字体图标都是通过导入阿里爸爸的iconfont字体矢量图标来解决的，但是文件下有几个样式的文件引起了我的注意：

1.个人感觉iconfont最大的优势有三点 
- 矢量图标。相比切图，至少不会糊。 
- 可控颜色。相比切图，至少可以换颜色。 
- 方便管理和调用。相比切图，至少不会忘。 
- 减少请求。所有的图标只用一个请求。

 

2.2 svg、eot、ttf、woff比较
注意，这里的SVG指的是svg字体。

2.2.1 介绍
SVG / SVGZ
SVG（Scalable Vector Graphics），即矢量图，是用于描述二维矢量图形的一种图形格式。在 Web 中使用 SVG 可以解决位图放大失真的问题。

TTF / OTF
TTF（TrueTypeFont）是Apple公司和Microsoft公司共同推出的字体文件格式，随着windows的流行，已经变成最常用的一种字体文件表示方式。部分的因为这种格式容易被非法复制，因此催生了后来的WOFF字体格式。

EOT
EOT（Embedded Open Type），是微软创造的字体格式。这种格式只在IE6-IE8里使用。

WOFF
WOFF（Web Open Font Format）是一种网页所采用的字体格式标准。此字体格式发展于2009年，现在正由万维网联盟的Web字体工作小组标准化，以求成为推荐标准。此字体格式不但能够有效利用压缩来减少档案大小，并且不包含加密也不受DRM（数位著作权管理）限制。WOFF字体通常比其它字体加载要快，因为使用了OTF和TTF字体里的存储结构和压缩算法。这种字体格式还可以加入元信息和授权信息。

WOFF2(*)
WOFF2（Web Open Font Format 2.0），相比woff最大的优化应该是加强了字体的压缩比。

2.2.2 大小

woff2(*) < woff < ttf ≈ eot < svg

从请求量上来看，woffwoff2格式的图标库最小