图标字体的优缺点和使用

图标字体的优势和劣势

优势

1. 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，不需要下载一个个图像。这样可以减少HTTP的请求数量，而且和HTML5的离线存储配合，可以对性能做出优化。

2. 灵活性：不调字体可以像页面中的文字一样，通过font-size属性来对其进行大小的设置，而且还可以添加各种文字效果，如color、hover、filter、text-shadow、transform等效果。灵活的简直不像话！

3. 兼容性：图标字体支持现代浏览器，甚至是低版本的IE浏览器，所以可以放心的使用它。

4. 相比于位图放大图片会出现失真、缩小又会浪费掉像素点，图标字体不会出现这种情况。

劣势

1. 图标字体只能被渲染成单色，或者是CSS3的渐变色

2. 版权上也有着对应的限制，当然还是有很多免费的图标字体可以供我们下载。

3. 当自己创作图标字体的时候，是比较耗费时间的，重构人员的后期维护成本也比较高

图标字体的制作

1. 网址：https://icomoon.io

2. 点击左上角的IcoMoon App

3. 进入之后点击Import Icons把SVG图片上传上去

4. 全选上传上去的图片，点击右下角的Generate Font

5. 每个项目下都会有一个Get Code按钮，点击它会出现一个使用方法的弹窗

6. 点击左上角的Preferences，在Font Name中设置生成字体的名称

7. 设置好之后，关闭弹出窗口，点击右下角的Download按钮进行下载

8. 打开下载好的压缩包，把fonts目录下的文件拷贝到任意目录下。之后就可以通过之前Get Code按钮下提供的使用方法进行使用。