多语言展示
当前在线:1435今日阅读:23今日分享:25

WebApp字体图标的制作

在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题,经过实践发现了一种比较好的解决方案,图标字体化。    字体是矢量的,使用icon font来生成图标相对于基于图片的图标来说,有如下的好处:自由的变化大小而不失真,适用于不同分辨率和尺寸的屏幕自由的修改颜色添加阴影效果支持图片图标的其它属性,例如,透明度和旋转等等可以添加text-stroke和background-clip:text等属性,只要浏览器支持   字体图标有eot、ttf、woff、svg四种格式,eot格式,只能用于IE9以下版本的IE浏览器中。剩下的3个格式用于现代高级浏览器。    下面介绍2中字体图标制作方法
工具/原料
1

chrome

2

inkscape

方法一、下载网上提供的字体图标
1

先介绍几个字体图标的下载网站:1、IcoMoon2、Fontello3、FontsAddict 这个是一个字体图标搜索引擎,提供的字体图标最多下面以IcoMoon为例,介绍下载字体图标的方法

2

进入IcoMoon,看到如下图的页面,点击"Custom Built and Crisp Icon Fonts, Done Right"

4

点击"Download",即可下载。下载得到的压缩包里有使用示例。

方法二、将自己的图片转为字体图标
1

有时候我们可能在网上找不到我们需要的字体图标。估计大部分人都不是美工,不会设计矢量图,最多能用ps画个简单的图,或者下载一些png格式的图标文件,我们该怎么把这些png格式的图片转为字体文件呢?

3

打开inkscape,文件->打开->选择你的png图片,如图。注意:最好要转换的原图是透明的png格式,而且最好是单色图,因为字体图标是单色的

4

点击选中图层,如图

5

路径->提取位图轮廓,如图

6

出现对话框,共有6中提取轮廓的模式,一般用 Brightness cutoff 或者 Brightness steps,点击右下角的"Update",可以看到效果,如图。选好你需要的模式,点击确定,关闭"提取位图轮廓"的对话框。

7

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

8

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

9

接下来把制作得到的svg文件生成ttf、woff格式的字体。打开IcoMoon网站,点击左上角的"Import Icons"按钮,选择你上一步制作的svg文件。

10

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

推荐信息