HTML5学堂-码匠 HTML5学堂

您当前位于:工具类文件推荐 ——> WEB前端开发,图标的快速制作
上一篇:Git系列 Git整体知识的总结与复习 下一篇:没有了

WEB前端开发,图标的快速制作

2016/11/15 08:34:09 | 作者:HTML5学堂(码匠) | 分类:工具类文件推荐 | 关键词:背景图,iconfont,字体,图标

字体相关知识

了解iconfont(字体图标)前我们先了解下字体,因为iconfont的实现与字体息息相关,所以掌握字体相关知识便于理解iconfont。接下来看一个简单的例子

  1. <!doctype html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>HTML5Course - 梦幻雪冰</title>
  6.  <link rel="stylesheet" href="reset.css">
  7.  <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
  8.  <style>
  9.   .font-demo p:nth-child(1) {
  10.    font-family: 'Microsoft YaHei';
  11.   }
  12.   .font-demo p:nth-child(2) {
  13.    font-family: Arial;
  14.   }
  15.  </style>
  16. </head>
  17. <body>
  18.  <div class="font-demo">
  19.   <p>HTML5学堂</p>
  20.   <p>摩登足迹</p>
  21.  </div>
  22. </body>
  23. </html>

结果:

分析:在网页中,微信小编给段落分别设置了两个不同的字体,页面上的段落文本就会按照设置的字体进行渲染。大家可能会有一个疑问?为什么字体设置为Arial页面展示的文字是Arial的样式,设置成Microsoft YaHei就展示成Microsoft YaHei的样式?具体原因请看下面的例子。

  1. <!doctype html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>HTML5Course - 梦幻雪冰</title>
  6.  <link rel="stylesheet" href="reset.css">
  7.  <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
  8.  <style>
  9.   .font-demo p:nth-child(1) {
  10.    font-family: 'Microsoft YaHei';
  11.   }
  12.   .font-demo p:nth-child(1) {
  13.    font-family: 'Arial';
  14.   }
  15.  
  16.  </style>
  17. </head>
  18. <body>
  19.  <div class="font-demo">
  20.   <p>HTML5 学 堂</p>
  21.   <p>摩登足迹</p>
  22.  </div>
  23. </body>
  24. </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实战练习

  1. <!doctype html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>HTML5Course - 梦幻雪冰</title>
  6.  <link rel="stylesheet" href="reset.css">
  7.  <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
  8.  <style>
  9.         /*第一步:使用font-face声明字体*/
  10.   @font-face {
  11.    font-family: 'iconfont';
  12.       src: url('iconfont.eot'); /* IE9*/
  13.       src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  14.       url('iconfont.woff') format('woff'), /* chrome、firefox */
  15.       url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  16.       url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
  17.   }
  18.   .font-demo {
  19.    padding: 20px;
  20.   }
  21.   /*第二步:定义使用iconfont的样式*/
  22.   .font-demo:after {
  23.    font-family: 'iconfont';
  24.    /*第三步:挑选相应图标并获取字体编码,应用于页面*/
  25.    content: '\e6d4';
  26.   }
  27.  </style>
  28. </head>
  29. <body>
  30.  <div class="font-demo">摩登足迹</div>
  31. </body>
  32. </html>

结果:

问题:如何设置图标的样式?比如设置成#09f的样。

提示:因为阿里巴巴矢量图标库下载的时候提供了详细的代码实例,微信小编这边就不给大家写其它案例了。

HTML5学堂微信~欢迎扫码关注

HTML5学堂微信

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

上一篇:Git系列 Git整体知识的总结与复习 下一篇:没有了