iconfont字体图标库
HTML5学堂小编的话:昨日发布的iconfont的内容有些不足,对于可能不太了解iconfont和特殊字体的学习者来说,可能会存在一定的理解问题,在此针对昨日内容进行补充,详细讲解。
字体相关知识
了解iconfont(字体图标)前我们先了解下字体,因为iconfont的实现与字体息息相关,所以掌握字体相关知识便于理解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-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的优势
1、相比图片的大小容量,iconfont几乎是羽翼级轻量。
2、图标都被打包在字体库里面,减少了HTTP的请求数量,加速网页加载速度。我们采用雪碧图的目的也是减少图片请求数量。
3、使用iconfont非常方便,和设置网页字体一样,可以利用CSS来定义图标大小、图标颜色、图标透明度等
iconfont的劣势
1、利用CSS无法方便的定义多彩的icon,大部分是单一颜色。
2、因为iconfont跟字体有关,所以它很容易受到字符编码的影响。
iconfont的使用
平时的网页开发该如何使用iconfont?在这边微信小编给大家推荐一个工具:Iconfont-阿里巴巴矢量图标库。
1、打开http://www.iconfont.cn,选择图标库导航(注册一个账号,方便操作)。
2、根据项目需求选择一个图标库点击进去,然后选择图标。
3、下载打包好的图标,里面包含了图标库和代码实例。
如何在文本或伪元素当中实现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学堂
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- php实现每日签到功能
- laravel5实现微信第三方登录功能
- Laravel框架定时任务2种实现方式示例
- tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
- Python 基于jwt实现认证机制流程解析
- Keras – GPU ID 和显存占用设定步骤
- PHP中如何使用Redis接管文件存储Session详解
- 看我一波,Android获取进程名函数,代码优化到极致的操作!
- laravel5使用freetds连接sql server的方法
- opencv 图像滤波(均值,方框,高斯,中值)
- opencv 阈值分割的具体使用
- 浅谈keras 的抽象后端(from keras import backend as K)
- 在Keras中利用np.random.shuffle()打乱数据集实例
- 浅谈matplotlib中FigureCanvasXAgg的用法
- Keras自定义实现带masking的meanpooling层方式