css/css3字体图标的制作和使用，附css3字体@font-face

在项目开发的过程中，我们会经常用到一些图标。但是我们在使用这些图标时，往往会遇到失真的情况，而且图片数量很多的话，页面加载就越慢。所以，我们可以使用字体图标的方式来显示图标，既解决了失真的问题，也解决了图片占用资源的问题。

一、如何制作字体图标

1、上网下载需要的图标（svg格式）,在这里推荐一个网站 "阿里巴巴图标库",这里面几乎囊括了网站制作中所有需要的图标，而且是免费下载，（格式，大小，颜色都可以自定义）。

2、阿里字体图标库图标字体的使用方法

进入阿里巴巴图标库首页，登录账号。

@1、点击导航上的“图标库”选择图标库，然后选择自己看中的图标

@2、点击看中的图标以后，图标会被收入到右上角你账号的右边盒子里

@3、点开盒子，选择存储为新项目还是老项目中去，保存完以后会直接进入到第4步

@4、从顶部导航上的图标管理，可以进入自己的图标项目页面

@5、在图标项目页面，可以编辑你的图标

@6、可以下载图标，也可以引用在线图标

下载到本地，一般情况下，图标字体是不能跨域使用的，一定要跨域是需要做些配置，暂且不提。

@7、下载的文件里面有html格式的文件使用说明

下载的目录结构如下：

@8、有3种应用方式

unicode引用，symbol引用，IconFont 图标

@9、一般用unicode，步骤如下：

第一步：拷贝项目下面生成的font-face

@font-face {

font-family:'iconfont';

src: url('iconfont.eot');

src: url('iconfont.eot?#iefix') format('embedded-opentype'),

url('iconfont.woff') format('woff'),

url('iconfont.ttf') format('truetype'),

url('iconfont.svg#iconfont') format('svg');

}

第二步：定义使用iconfont的样式

.iconfont{

font-family:"iconfont"!important;

font-size:16px;

font-style:normal;

-webkit-font-smoothing: antialiased;

-webkit-text-stroke-width:0.2px;

-moz-osx-font-smoothing: grayscale;

}

第三步：挑选相应图标并获取字体编码，应用于页面

二、兼容问题

由于浏览器对@font-face的兼容问题，这里涉及到一个字体format的问题，因为不同的浏览器对字体格式支持是不一致的，所以需要转换出多种字体格式文件以便兼容尽可能多的浏览器

三、自定义字体图标

使用第三方平台转换字体文件为font-face所支持的格式

TureTpe(.ttf)格式：

OpenType(.otf)格式：

Web Open Font Format(.woff)格式：

Embedded Open Type(.eot)格式：

SVG(.svg)格式：

步骤为先上传图片字体文件，然后选择要转换的几种格式下载