Web字体设置以及Axure安装FontAwesome字体图标图文教程

当原型使用一些特殊字体时，在没有安装该字体的设
备上将无法正常显示。Web字体可以较好地解决这个问题。
Web字体的使用包含两种方式。
方式一：链接“.CSS”文件（见图6-10）。

优点：设置简单。
缺点：需要网络以及在线CSS文件支持。
以FontAwesome字体为例。在Web字体设置中，单击
【+】添加新的配置，勾选【链接到“.CSS”文件】选项，将
该字体官方网站提供的“.CSS”文件地址填入超链接中即可。
这样只要浏览原型时有网络支持，即可正常显示字体。

图中为Fontawesome 4.4.0字体的配置方法。该字体
CSS文件的官方链接地址为： https：//maxcdn.bootstrap cdn.com/font-awesome/4.4.0/css/font-awesome.min.css。
方式二：@font-face（见图6-11）。

优点：支持本地字体与在线字体。
缺点：设置略有复杂。
仍以FontAwesome字体为例。新建Web字体配置后，
选择【@font-face选项】并填写代码。
在线字体代码如下：
font-family：FontAwesome。
src：url(‘http://7xl7jg.com1.z0.glb.clouddn.com/fon tawesome-webfont.ttf’) format(‘truetype’)。
本地字体代码如下：
font-family：FontAwesome。
src：url(‘fontawesome-webfont.ttf’) format(‘true type’)。
注意：使用本地字体需要将字体文件（.ttf）拷贝到生成
的HTML文件夹中。
通过以上方式处理后，未安装该字体的设备中查看原型
时即可正常显示字体。
注意：在Axure RP 8的元件库中，提供了FontAwe some图标元件库，该元件库可以直接使用，无需进行上述设
置。但是，官方提供的FontAwesome图标元件库与上述元件
库有很大区别，官方元件库中的图标并不是文字，而是形状。
在之后的案例中，我们需要将一些图标字体放入文本编辑界
面进行编辑，这是官方的元件无法做到的。

本文作者：xunzou 原文地址：http://www.jianshu.com/p/806ae932082b 略有删改

在用Axure做原型设计时常常需要用到图标。常用的方法就是采用网络上分享出来的部件库，比较全的就是小楼老师的部件库。但是这种部件库的ICON一般都是图片，当颜色与当前原型色调不一样的时候，就不能用了。而且ICON常常表示状态，不同的状态需要不同的颜色，用图片做原型ICON就不合适了。后来发现了一个神器，字体icon，每个icon其实就是一个文字，文字更改颜色和大小非常方便。

字体名称：FontAwesome

FontAwesome字体下载链接：http://yunpan.cn/cytakifcnYz6j（提取码：fa4d）

FontAwesome字体部件库：http://yunpan.cn/cyXw7JszvyPmh（提取码：53db）

1.字体安装

a.下载完字体之后，解压缩文件，选择font文件夹