WEB 开发中ICON FONT使用介绍

首先介绍两个制作 ICON FONT 的网站

http://www.（国内的）         

https://       (个人推荐)         

另外大批量的图标下载网站，在我以前的文章中专门推荐过，请自行查阅

---

WEB 开发中 ICON FONT 使用介绍

1. 移动WEB开发中常用图标的问题 

1. Retina 显示屏，1倍大小的切图会变虚，不能很好的进行“缩放”，在“响应式设计”中使用受限制

2. 2倍大小的切图增加了总文件的大小，占用服务器资源

3. 每个图标不同状态需要独立的图片，而过多的图片增加了很多额外的'http请求'，使网页的性能被大大降低，

 PS: retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个，而为了适配高清大屏位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍，切图也就变为了2倍，从而导致占好的资源跟多

参考资料：

http://www./cn/articles/development-of-the-mobile-web-deep-concept

2. icon font 的特点

1. 字体图标占有的资源文件非常小，比2倍切图资源要小很
   

   

   

2. 字体图标加载速度快，不要单个下载每个图标文件，只要字体文件加载成功，图标会马上被渲染出来

3. 可以使用适用字体的 css代码来控制图标的大小、颜色、hover 状态、透明度、阴影、翻转等属性和效果
   

4. 放大后不会出现发虚的情况，在“响应式设计”中自由使用 

5. 目前有很多的移动开发框架中，都有提供免费的字体图标库，如 boostrap、SUI 、AmazeUI 等，并且自己可以按需制作

6. 目前主流的现代浏览器都支持ICONFONT，兼容性非常高（ps:我在 IOS中测试过，也是可以使用的，这样就更加方便了）
   

   

3.icon font 使用注意事项

1. 字体图标只能被渲染成单色或者是 CSS3控制的渐变色，而复杂多色的图标无法使用

2. 创作自己的字体图标很费时间，每一个图标都要处理成单个的 SVG 文件上传到制作网站，进行制作，并且如果一个图标有调整，就需要再次打包制作全部的字体包，维护成本比较高
   
   

关于 ICONFONT 的制作请参阅：

http://www./help/platform.html

需要注意的是 在阿里巴巴矢量库上制作 ICONFONT 是有大小规定的，有固定的模板，而在 ICOMOON平台上是没有具体的大小规定，个人建议大家使用 ICOMOON,并在制作的时候把图标大小制作成1倍图的大小，保证在适配的时候完美放缩。

由于 Android 支持的图片格式非常有限，所有部分测试么有在 Android 平台中进行，后期测试后会给出答案

在文章末尾再给大家抛出一个新的图片格式    WebP

WebP资料：

http://kodyan./2016/04/28/android-support-image/

https://developers.google.com/speed/webp/

https://isux.tencent.com/introduction-of-webp.html

http:///#search=webp

ICONFONT参考资料：

http://www./cn/articles/development-of-the-mobile-web-deep-concept

http://www.uisdc.com/make-the-font-icon

http://www.uisdc.com/vector-graphics-prospects

http://www./jzjl/20131010386.html

http://www./p/fb4IgW.html

http://baike.baidu.com/link?url=a46ONUh9Q9yaYo5-v1W-4P-LdRGZx8_cRXWjuhxQ8N8a4sF6HbIiA375XYMoFIHgp6KYgVB2Zh_tG25mgFc99q

http:///questions/2336522/png-vs-gif-vs-jpeg-vs-svg-when-best-to-use/7752936#7752936

---

---