移动开发 WebApp字体图标的制作.docx

移动开发 WebApp字体图标的制作Webapp为了使用不同分辨率和尺寸的屏幕，基本都会用字体图标（icon font），也就是字体文件里面的字符作为图标来用。主要特性字体是矢量的，使用icon font来生成图标相对于基于图片的图标来说，有如下的好处： 自由的变化大小而不失真，适用于不同分辨率和尺寸的屏幕 自由的修改颜色 添加阴影效果 支持图片图标的其它属性，例如，透明度和旋转等等 可以添加text-stroke和background-clip:text等属性，只要浏览器支持字体图标的用法我们来看下sencha touch程序中图标是怎么用的：这个+图标实际上是Pictos字体中的&字符。（我们自己写个div，然后写上样式:before伪类样式，也能显示出来图标，并不是只有按钮才能用的）字体图标的几种格式字体图标文件，有4种格式，我们可以打开 ST项目touchresourcesthemesfontspictos，看到里面有如下4个文件：pictos-web.eotpictos-web.svgpictos-web.ttfpictos-web.woff（eot格式，只能用于IE9以下版本的IE浏览器中。剩下的3个格式用于现代高级浏览器。）为什么要用3种格式呢？主要是因为不同系统不同浏览器支持的字体格式不一样或者不完全支持某种格式的字体。我们可以看下面三幅图，表示不同浏览器对这三种字体格式的支持程度：（以上来自Can I Use网站）字体图标的制作1：下载网上提供的字体图标先介绍几个字体图标的下载网站：1、IcoMoon2、Fontello3、FontsAddict这个是一个字体图标搜索引擎，提供的字体图标最多至于如何下载，可以看我以前的这篇博文：移动开发7、Sencha Touch图标的使用与自定义字体图标的制作2：将自己的图片转为字体图标有时候我们可能在网上找不到我们需要的字体图标。估计大部分人都不是美工，不会设计矢量图，最多能用ps画个简单的图，或者下载一些png格式的图标文件，我们该怎么把这些png格式的图片转为字体文件呢？1、下载inkscape：/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格式