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 &#x5B66; &#x5802;</p>
  <p>&#x6469;&#x767B;&#x8DB3;&#x8FF9;</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

在网页当中,通过文本来实现,如上&#xe600;就是用来实现“较粗的关闭”;

在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学堂(h5course-com)

原文发表时间:2016-10-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏互联网杂技

手机网页布局经验总结

引言 众所周知,在当今移动互联网大行其道的现在,基本上所有的年轻人都是使用过手机去浏览一些网站的资讯或者使用过手机去购物网站支付买过东西,但是大家有没有想过这样...

3686
来自专栏姬小光

姬小光前端小讲堂【第007期】- 切图大法之表格布局

前面几期中,我们已经了解到了前端开发的三板斧,即 HTML,CSS,Javascript。熟练掌握这三个基本技能,基本上就可以混口饭吃了。

972
来自专栏编程

用JavaScript 代码来做,图片切换效果!

用原生的JS写动画效果的确是个很令人纠结的事情,倒不如直接用jQuery来写,亦或找一些jQuery插件。能力达不到的时候,为了工作进度,只能采取心有不甘的手段...

1925
来自专栏前端知识分享

第10天:CSS初始化操作

       在写页面过程中,每个浏览器都会有默认样式,为了避免浏览器的样式兼容问题,我们会在样式开始部分对常用标签进行重置样式。这样我们在写样式时,就不会有误...

992
来自专栏AndroidTv

一起撸个简单粗暴的Tv应用主界面的网格布局控件(下)

上一篇中我们已经一起学了怎么简单粗暴的撸个支持动态布局的网格控件出来,但在上一篇的介绍中,并没有学习实现网格控件的滑动效果,所以本篇就来讲讲,要如何让我们的网格...

3368
来自专栏Coding+

制作一个标准 ICO 图标

ICO是Windows的图标文件格式,此格式图标文件可以存储单个图案、多尺寸、多色板的图标文件。一个图标实际上是多张不同格式的图片的集合体,并且还包含了一定的透...

1822
来自专栏一“技”之长

iOS界面布局之二——初识autolayout布局模型

     在上一篇博客中介绍了传统的布局方式:autoresizing。随着iphone型号的越来越多,屏幕的标准也更加多样化,通过autoresizing已经...

683
来自专栏前端杂货铺

css截断长文本显示

实现 截断长文本显示处理,以前是通过后台的截取,但这种方法容易丢失数据,不利于SEO。 而通过前端css的截断,则灵活多变,可统一运用与整个网站。 这项技术主要...

3577
来自专栏Python爬虫实战

数字华容道03:首页创建

整个布局采用 QVBoxLayout (竖型布局)。最上方的“数字华容道”字样是一张图片,采用QLabel进行展示。下面几个选择难度的按钮和排行榜按钮采用 QP...

422
来自专栏互联网杂技

交互设计控件之按钮设计

一.主按钮和次按钮 ? 很多按钮是成对出现的,比如“确定”和“取消”。一般情况下,按钮会有主次之分,一个按钮是我们期望用户去做的,另一个按钮是在特殊情况下才去...

2895

扫码关注云+社区