[Phonegap+Sencha Touch] 移动开发43 WebApp字体图标的制作

Sencha touch从2.2开始，里面用到的图标全部是字体图标（icon font），也就是字体文件里面的字符作为图标来用。

主要特性

字体是矢量的，使用icon font来生成图标相对于基于图片的图标来说，有如下的好处：

• 自由的变化大小而不失真，适用于不同分辨率和尺寸的屏幕
• 自由的修改颜色
• 添加阴影效果
• 支持图片图标的其它属性，例如，透明度和旋转等等
• 可以添加text-stroke和background-clip:text等属性，只要浏览器支持

字体图标的用法

我们来看下sencha touch程序中图标是怎么用的：

这个"+"图标实际上是Pictos字体中的"&"字符。

（我们自己写个div，然后写上样式:before伪类样式，也能显示出来图标，并不是只有按钮才能用的）

字体图标的几种格式

字体图标文件，有4种格式，我们可以打开 ST项目\touch\resources\themes\fonts\pictos，看到里面有如下4个文件：

pictos-web.eot

pictos-web.svg

pictos-web.ttf

pictos-web.woff

（eot格式，只能用于IE9及以下版本的IE浏览器中。剩下的3个格式用于现代高级浏览器。）

为什么要用3种格式呢？主要是因为不同系统不同浏览器支持的字体格式不一样或者不完全支持某种格式的字体。我们可以看下面三幅图，表示不同浏览器对这三种字体格式的支持程度：

（以上来自Can I Use网站）

字体图标的制作1：下载网上提供的字体图标

先介绍几个字体图标的下载网站：

1、IcoMoon

2、Fontello

3、FontsAddict 这个是一个字体图标搜索引擎，提供的字体图标最多

至于如何下载，可以看我以前的这篇博文：《移动开发7、Sencha Touch图标的使用与自定义》

字体图标的制作2：将自己的图片转为字体图标

1、下载inkscape：

https://inkscape.org/en/download/

注意下载对应操作系统的版本，下载完之后安装

2、打开inkscape，文件->打开->选择你的png图片，如下图

3、点击选中图层，如下图

4、路径->提取位图轮廓，如下图：

5、出现对话框，共有6中提取轮廓的模式，一般用 Brightness cutoff 或者 Brightness steps，点击右下角的"Update"，可以看到效果：

选好你需要的模式，点击确定，关闭"提取位图轮廓"的对话框。

6、此时有两个图层，一个路径图层，一个原图图层。吧路径图层拖至一旁，选中原图图层，按delete删除，然后把路径图层拖回原位置（顶上工具栏 x: 0, y: 0 的位置）

7、文件->另存为，"保存类型"选择"普通的svg(*.svg)"，保存到你需要的位置即可。

（如果你会用矢量图工具（比如Illustrator等）设计矢量图的话，你可以不用这么麻烦，直接设计个矢量图就行了。）
（如果你嫌上面的方法复杂，这里有个在线工具 Online Svg Image Converter，可以将Png转换为Svg）

8、把svg转为ttf、woff格式。

打开IcoMoon网站，点击左上角的"Import Icons"按钮，选择你上一步制作的svg文件。

这样就导入进来了。然后你只要点右下角"Generate Fonts"就可以下载下来了，下载下来的zip包里面有eot、ttf、svg、woff四种格式的字体。

注意：最好要转换的原图是透明的png格式，而且最好是单色图，因为字体图标是单色的