神奇的图标字体化！

Posted 2020-11-05 hoanfir

在做PC端/手机端Web项目中，我们会经常遇到图标以何种形式在服务器上存在并在前端显示的问题。比如之前比较流行使用SVG显示icon。

另外，现在移动端web app越来越流行，但是图标在手机上显示会比较模糊，现在有很多小的Icon，如分享、回复、赞、返回、话题、访问、箭头等，这些Icon一般都是纯色的。

开始制作时可以考虑使用双倍大小的Sprite图（雪碧图），通过CSS样式设置只显示二分之一尺寸，这样在Retina屏上显示的大小是正常的，一旦放大屏幕后图标又变得模糊不清，测试的效果不是很理想；

后来又考虑多套图标适配方案、SVG矢量图等，都因为种种原因不理想（如多套图标繁琐、android 2.3不支持SVG格式等）

 

---

 

 

现在，介绍当下首选的以及最流行的方法：图标（icon）字体化

首先，我在一个web项目中，有这样一个目录文件：static/fonts/icomoon.eot、static/fonts/icomoon.svg、static/fonts/icomoon.ttf、static/fonts/icomoon.woff

上面四个文件就是图标字体化

eot：IE浏览器所需图标格式

svg：更高版本浏览器所需图标格式

ttf：Firefox浏览器所需图标格式

woff：IE浏览器所需图标格式

---

 

 

优缺点：

1. 图标清晰

2. 轻量性：一个图标字体比一系列的图像（特别是在Retina屏中使用双倍图像）要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合html5离线存储做性能优化

3. 灵活性：图标字体可以用过font-size属性设置其任何大小，还可以加各种文字效果，包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话，必须得为每个不同大小和不同效果的图像输出一个不同文件

4.兼容性：网页字体支持所有现代浏览器，包括IE低版本。详细兼容性可以点击这里

 

除了以上优势之外，当然也有劣势
1、图标字体只能被渲染成单色或者CSS3的渐变色，由于此限制使得它不能广泛使用。
2、使用版权上有限制，有好多字体是收费的。当然也有很多免费开源的精美字体图标供下载使用。
3、创作自已的字体图标很费时间，重构人员后期维护的成本偏高。