清澈的风

如何花式使用字体（二）

吃瓜群众一：我想搞百度手机版的图标，可是审查元素都找不到在哪里诶……
吃瓜群众二：好多其他站的icon也是，并没有发现图片文件在哪里……
吃瓜群众三：你们啊，too young！

以下是三号吃瓜群众的独白，与本作者无关

吃瓜群众三：你们知道iconfont这个东西么？
众吃瓜群众：不知……
吃瓜群众三：不知道还不赶紧去看

（于是众人赶紧去到iconfont官网）

iconfont.cn是马云爸爸家的UX部门推出的矢量图标管理网站，也是国内首家推广Webfont形式图标的平台。
官方字体库界面长这样


另外还有很多其他公开库可以使用
如果我们想要找某一类型的字体图标，只要在搜索框输入关键词就可以啦

然后就粗现了很多西瓜

此时，如果只需要图像格式的话，直接下载选择格式就好了

但是，如果我们希望它是以字体图标写进html的话，就要先加入购物车里

然后下载到本地

会有一个文件夹包含demo.html demo.css iconfont.css和四个字体文件
打开demo.html会有已经写好的示例~
总的来说有两种方式可以使Html页面引入iconfont

第一种：
css

1
2
3
4
5
6
7
@font-face {
    font-family: 'iconfont';
    src: url('iconfont.eot');/*其他兼容自行添加*/
}
.iconfont{
    font-family:"iconfont";
}

html

1
<i class="iconfont">&#xe7a3;</i>

第二种：
css

1
2
3
4
5
6
7
8
@font-face {
    font-family: 'iconfont';
    src: url('iconfont.eot');/*其他兼容自行添加*/
}
.iconfont{
    font-family:"iconfont";
}
.icon-xigua:before { content: "\e7a3"; }

html

1
<i class="icon-xigua iconfont"></i>

蓝后，你的页面就阔以出现西瓜啦，再根据需求添加样式吧~

fontcss