由IconFont引起的svg、ttf、woff、woff2图标的研究及转换

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg><circle glyph-name="warning" unicode="&#59343;" cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>

3.3 ttf / otf

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

3.4 eot

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

3.5 woff

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

3.6 woff2(*)

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

3.7 js+css

这个就不用说了吧~

4、文件大小与兼容性

4.1 文件大小：

woff2(*) < woff < ttf ≈ eot < svg
从请求量上来看，woff\woff2格式的图标库最小

4.2 浏览器兼容性：

以下兼容性图片来自于网络

@font-face：

基本全兼容

svg：

ios、safari及低端安卓兼容

eot：

只有IE

ttf：

基本兼容，IE兼容情况不是很好

woff：

IE9+，android4.4+，其他兼容良好

woff2(*)：

除IE及低系统移动端，其他兼容情况较好

从上图来看

font-face支持情况良好，完全可以使用字体形式来实现图标；
PC上兼容较好的是woff格式，ttf对IE的兼容情况不容乐观，svgfont只对Safari兼容，而eot只对IE兼容，如果要做到兼容IE8需要结合eot混着用；
移动上eot完全不兼容，svgfont低端系统能很好兼容但不知道为何高端安卓不再支持，考虑到厂里较特殊的兼容要求（ios8.0，android4.0），最为合适的看来就是woff及ttf格式了。

结合大小和兼容情况来看，可以优先使用woff格式（要兼容安卓4.0的话优先使用ttf），如果要兼容IE低版本的话需要使用eot格式，正如iconfont.css的处理：

@font-face {font-family: "iconfont";src: url('iconfont.eot?t=1555049840333'); /* IE9 */src: url('iconfont.eot?t=1555049840333#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff2;charset=utf-8;') format('woff2'),url('iconfont.woff?t=1555049840333') format('woff'),url('iconfont.ttf?t=1555049840333') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url('iconfont.svg?t=1555049840333#iconfont') format('svg'); /* iOS 4.1- */
}

5、转换

iconfont文件互转有以下好的网站：

国内网站：https://www.fontke.com/tool/convfont/
外国网站： https://cloudconvert.com/

5.1 批量合并系统

本人想做的一个 对iconfont批量合并的系统

背景：本人刚接手一个项目，里面有iconfont，结构都还完整，有一天需求想改两个图标（大量使用）。
过程：然后，剩下我一个人在风中瑟瑟发抖。要实现，就需要新增两个图标，然后从网站上下载zip，再在项目里一个一个页面改class和引入新的css文件。
想法：
1.引入css（css引入所有用到的ttf等文件）
2.ttf等文件可以通过svg转换，也就是说，如果要改一个图标，只要改svg，然后转换即可
3.而如果要新增图标，只要在iconfont官网制作并下载zip，然后合并svg文件(在svg里加一个glyph)，然后再在css里定义.icon-xxx:before { content:"\xxxx";}即可使用了（转换）。
4.如何处理和合并svg文件呢？
合并svg：
1.用EditPlus或文本编辑器打开.svg文件发现，svg就是一个xml文件吖。
2.那么流程就清楚啦，只要合并xml内容就行了。
整理：
1.用户指定原svg文件和原css文件，然后再从iconfot制作下载要合并的svg文件。
2.提交后后台就有两个svg文件了，后台以原svg文件为主，读取新svg文件的glyph标签，并处理其glyph-name=“music” unicode="" 两个属性。（原文件产生两个map，用于解决重复）
3.判断重复，有重复就提示，没重复就合并到原svg文件。
4.仔细看前缀，在css文件追加 .x=前缀-x=glyph-name:before { content:“x=unicode”;}
5.比如前缀是icon，name=music，unicode=，就追加 .icon-music:before { content:"&#xf001";}
6.这样，用户就得到了新的svg和css文件啦
7.用户手动将svg到转换网站转换，就能得到新的一个完整结构啦。
8.不动原svg或css内容的原因是，可能原来图标就有被使用了，不能随意更改。
最后：
1.本系统主要是在合并环节。----如有可能，可以增加转换环节（有人说node.js可以）。
2.做得好的话，还可以将图标显示出来，用户决定去留。

6、附件

6.1 坑？

搜索了十几个网站和文章，看到有人说iconfont有坑，特留文如下：

接下面我们再来说说Iconfont在使用过程中可能遇到的各种坑。

字体图标在一些浏览器下会遇到被加粗的问题，设置-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;解决。
跨域访问不到字体，由于怕字体版权得不到保护，默认跨域的字体文件是访问不到的，一般通过服务器设置 Access-Control-Allow-Origin指定自己需要的网站和设置同域来解决这个问题。
不要包含没有使用的@font-face，IE将部分他是否使用，统统加载下来。万恶的IE。
@font-face声明之前，如果有script标签的话，直到字体文件完成下载之前，IE将都不会渲染任何东西。

有兴趣的同学可以去坑里面走一圈，自己试试坑的深浅。博主就介绍在这里，如果有错误还望大家指出，共同学习。

6.2 x

觉得可以，记得右上角点赞哦！如有不正确的地方，欢迎各位大神指教！

【The End】