HTML5学堂小编的话：昨日发布的iconfont的内容有些不足，对于可能不太了解iconfont和特殊字体的学习者来讲，可能会存在必定的理解问题，在此针对昨日内容进行补充，详细讲解。
字体相关知识
javascript
了解iconfont（字体图标）前咱们先了解下字体，由于iconfont的实现与字体息息相关，因此掌握字体相关知识便于理解iconfont。接下来看一个简单的例子css
<!doctype html>html
<html>前端
<head>java
<meta charset="UTF-8">jquery
<title>HTML5Course - 梦幻雪冰</title>chrome
<link rel="stylesheet" href="reset.css">浏览器
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>微信
<style>网络
.font-demo p:nth-child(1) {
font-family: 'Microsoft YaHei';
}
.font-demo p:nth-child(2) {
font-family: Arial;
}
</style>
</head>
<body>
<div class="font-demo">
<p>HTML5学堂</p>
<p>摩登足迹</p>
</div>
</body>
</html>
结果：
分析：
在网页中，微信小编给段落分别设置了两个不一样的字体，页面上的段落文本就会按照设置的字体进行渲染。你们可能会有一个疑问？为何字体设置为Arial页面展现的文字是Arial的样式，设置成Microsoft YaHei就展现成Microsoft YaHei的样式？具体缘由请看下面的例子。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5Course - 梦幻雪冰</title>
<link rel="stylesheet" href="reset.css">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style>
.font-demo p:nth-child(1) {
font-family: 'Microsoft YaHei';
}
.font-demo p:nth-child(1) {
font-family: 'Arial';
}
</style>
</head>
<body>
<div class="font-demo">
<p>HTML5 学 堂</p>
<p>摩登足迹</p>
</div>
</body>
</html>
结果：
分析：
1 微信小编把'HTML5学堂'和'摩登足迹'这几个字改成unicode编码，此时页面上仍然能以微软雅黑字体展现为HTML5学堂。
2 使用浏览器打开页面时，浏览器会解析HTML文件进行渲染。当读到'HTML5学堂'或者'摩登足迹'字时会转换成对应的 unicode码（unicode码能够认为是字的特定编号）。
3 浏览器再根据CSS里面设置的font-family查找对应的字体文件。若是CSS里面没有设置字体，就会使用浏览器的默认设置。若是有自定义字体@font-face网络字体，则加载对应字体文件。
4 浏览器找到文件后根据unicode码去查找绘制外形，最后把找到的结果绘制到页面上。
iconfont是什么
相信你们看到这边更进一步了解了网页字体的渲染流程，接下来咱们来看看iconfont。
将iconfont拆开来看，就是icon（图标）和font（字体）。简单的说iconfont就是利用字体工具把咱们平时网页上用的图形图标转换成网页字体。其实跟字体差很少，字体对应的是文本，iconfont对应的是图标
iconfont的实际应用
2.1 手机百度首页
2.2 手机淘宝首页
iconfont有什么优点与劣势
iconfont的优点
一、相比图片的大小容量，iconfont几乎是羽翼级轻量。
二、图标都被打包在字体库里面，减小了HTTP的请求数量，加速网页加载速度。咱们采用雪碧图的目的也是减小图片请求数量。
三、使用iconfont很是方便，和设置网页字体同样，能够利用CSS来定义图标大小、图标颜色、图标透明度等
iconfont的劣势
一、利用CSS没法方便的定义多彩的icon，大部分是单一颜色。
二、由于iconfont跟字体有关，因此它很容易受到字符编码的影响。
iconfont的使用
平时的网页开发该如何使用iconfont？在这边微信小编给你们推荐一个工具：Iconfont-阿里巴巴矢量图标库。
一、打开http://www.iconfont.cn，选择图标库导航（注册一个帐号，方便操做）。
二、根据项目需求选择一个图标库点击进去，而后选择图标。
三、下载打包好的图标，里面包含了图标库和代码实例。
如何在文本或伪元素当中实现iconfont
在网页当中，经过文原本实现，如上就是用来实现“较粗的关闭”；
在after或before伪元素当中，经过设置content: '\e600'; 来实现“较粗的闭”；
iconfont实战练习
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5Course - 梦幻雪冰</title>
<link rel="stylesheet" href="reset.css">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style>
/*第一步：使用font-face声明字体*/
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome、firefox */
url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.font-demo {
padding: 20px;
}
/*第二步：定义使用iconfont的样式*/
.font-demo:after {
font-family: 'iconfont';
/*第三步：设置图标对应的编码，应用于页面*/
content: '\e6d4';
}
</style>
</head>
<body>
<div class="font-demo">摩登足迹</div>
</body>
</html>
结果：
问题：如何设置图标的样式？好比设置成#09f的样。
提示：阿里巴巴矢量图标库下载的时候提供了详细的代码实例。
欢迎沟通交流~HTML5学堂
HTML5学堂
HTML5技术原创分享平台
加入HTML5学堂
原来技术能够通俗易懂
每一天 都在为将来积蓄力量
以为不错，您再分享，分享朋友圈也是一种打赏
微信：HTML5_Course 微博：@前端技术分享网
本文分享自微信公众号 - HTML5 WEB前端分享（h5course-com）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。