一、前言

说起Iconfont,对大多数人来说可能不是什么新的技术了,现在好多大网站已经开始使用Iconfont。博主今天主要是简单说一下它的使用方法,聊聊使用它时可能遇到哪些坑,不熟悉的同学可以简要看一下,资深了解的同学,如果发现问题,还请指正。

二、什么是Iconfont

有的同学可能会问什么是Iconfont ?

其实,Iconfont 就是指用字体文件取代图片文件,来展示图标、特殊字体等元素的一种方法。

那么哪些网站在用它呢?有什么优缺点?以及如何使用它,接下来我们一一解答这几个问题。

首先让我们来看看都哪些网站使用了Iconfont 。

淘宝用到的地方

  

新浪微博用到的地方

还有像豆瓣,一淘,想玩等网站也都用到了它,我就不一一粘结图出来了,有兴趣的同学可以去瞧一瞧。

看完别人用到的地方,大家是不是也开始跃跃欲试了呢?

不过在具体说使用它之前,还需了解一下Iconfont 有什么优缺点,到底适不适合我们在项目中使用。

先来看看优点:
  1. 加载文件体积小。
  2. 可以直接通过css的font-size,color修改它的大小和颜色,对于需要缩放多个尺寸的图标,是个很好的解决方案。
  3. 支持一些css3对文字的效果,例如:阴影、旋转、透明度。
  4. 兼容低版本浏览器。

不过它也有局限性,不能作为css sprite的替代品,我们来看看缺点:

  1. 矢量图只能是纯色的。
  2. 制作门槛高,耗时长,维护成本也很高。

看到这些优缺点之后,我们可以决定它是否可以直接在我们的项目中使用 , 不论我们的项目是否可以使用它,都不妨碍我们去了解它, 接下来我们来看一下如何使用它。

三、使用Iconfont

首先,在我们写代码之前我们需要得到图标字体文件。现在有两种办法提供大家参考。

  1. 让设计师设计矢量图片然后通过工具直接转换成相应的字体。
  2. 使用第三方Iconfont 在线服务(例如: 阿里巴巴Iconfont平台 ),然后直接上传你自己设计的图标矢量图生成字体文件。

得到了字体文件之后我们就可以说一下如何使用它了。我们在CSS中像设置自定义字体一样使用就可以。

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- */
}

我们看到,不同的浏览器调用不同的字体文件。

定义一下Iconfont 的样式:

 .iconfont {
font-family:"iconfont" !important;
font-size:16px;
4 }

我们可以通过字体的大小font-size和自体颜色color改变图标的大小和颜色。示例图如下:

   

挑选图标对应的字体编码,应用于页面中:

<i class="icon iconfont"></i>

接下面我们再来说说Iconfont在使用过程中可能遇到的各种坑。

  1. 字体图标在一些浏览器下会遇到被加粗的问题,设置-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;解决。
  2. 跨域访问不到字体,由于怕字体版权得不到保护,默认跨域的字体文件是访问不到的,一般通过服务器设置 Access-Control-Allow-Origin指定自己需要的网站和设置同域来解决这个问题。
  3. 不要包含没有使用的@font-face,IE将部分他是否使用,统统加载下来。万恶的IE。
  4. @font-face声明之前,如果有script标签的话,直到字体文件完成下载之前,IE将都不会渲染任何东西。
有兴趣的同学可以去坑里面走一圈,自己试试坑的深浅。博主就介绍在这里,如果有错误还望大家指出,共同学习。
 
 
 
 
本博客文章皆为原创,未尽许可,请勿转载 (http://www.cnblogs.com/song-song/p/5212706.html


聊聊Iconfont的更多相关文章

  1. vue项目中引入iconfont

    背景 对于前端而言,图标的发展可谓日新月异.从img标签,到雪碧图,再到字体图标,svg,甚至svg也有了类似于雪碧图的方案svg-sprite-loader.雪碧图没有什么好讲的了,只是简单地利用了 ...

  2. 聊聊Unity项目管理的那些事:Git-flow和Unity

    0x00 前言 目前所在的团队实行敏捷开发已经有了一段时间了.敏捷开发中重要的一个话题便是如何对项目进行恰当的版本管理.项目从最初使用svn到之后的Git One Track策略再到现在的GitFlo ...

  3. Mono为何能跨平台?聊聊CIL(MSIL)

    前言: 其实小匹夫在U3D的开发中一直对U3D的跨平台能力很好奇.到底是什么原理使得U3D可以跨平台呢?后来发现了Mono的作用,并进一步了解到了CIL的存在.所以,作为一个对Unity3D跨平台能力 ...

  4. fir.im Weekly - 聊聊 Google 开发者大会

    中国互联网的三大错觉:索尼倒闭,诺基亚崛起,谷歌重返中国.12月8日,2016 Google 开发者大会正式发布了Google Developers 中国网站 ,包含了Android Develope ...

  5. 聊聊asp.net中Web Api的使用

    扯淡 随着app应用的崛起,后端服务开发的也越来越多,除了很多优秀的nodejs框架之外,微软当然也会在这个方面提供更便捷的开发方式.这是微软一贯的作风,如果从开发的便捷性来说的话微软是当之无愧的老大 ...

  6. 没有神话,聊聊decimal的“障眼法”

    0x00 前言 在上一篇文章<妥协与取舍,解构C#中的小数运算>的留言区域有很多朋友都不约而同的说道了C#中的decimal类型.事实上之前的那篇文章的立意主要在于聊聊使用二进制的计算机是 ...

  7. 聊聊 C 语言中的 sizeof 运算

    聊聊 sizeof 运算 在这两次的课上,同学们已经学到了数组了.下面几节课,应该就会学习到指针.这个速度的确是很快的. 对于同学们来说,暂时应该也有些概念理解起来可能会比较的吃力. 先说一个概念叫内 ...

  8. 聊聊 Apache 开源协议

    摘要 用一句话概括 Apache License 就是,你可以用这代码,但是如果开源你必须保留我写的声明:你可以改我的代码,但是如果开源你必须写清楚你改了哪些:你可以加新的协议要求,但不能与我所 公布 ...

  9. iconfont使用,亲测

    iconfont对于前端应用来说有很多便捷: 1.自由变化大小 2.自由修改颜色 3.可以添加一些视觉效果如:阴影.旋转.透明度. 4.兼容IE6 在线引用和下载到本地两种方法 一.在线引用 图标的制 ...

随机推荐

  1. (八)学习MVC之三级联动

    1.新建项目,MVC选择基本模板 2.新建类:Model/Student.cs,数据库信息有三个实体:分别是年级.班级和学生. using System; using System.Collectio ...

  2. java中的final关键字

    谈到final关键字,想必很多人都不陌生,在使用匿名内部类的时候可能会经常用到final关键字.另外,Java中的String类就是一个final类,那么今天我们就来了解final这个关键字的用法.下 ...

  3. chrome启用本地文件

    chrome禁止本地浏览时加载本地其他文件,可以采用添加启动参数的方式来支持 添加参数为 --allow-file-access-from-files  或者 --disable-web-securi ...

  4. Owasp Top 10 Security Risks for 2014

    A1-互联网泄密事件/撞库攻击 以大量的用户数据为基础,利用用户相同的注册习惯(相同的用户名和密码),尝试登陆其它的网站.2011年,互联网泄密事件引爆了整个信息安全 界,导致传统的用户+密码认证的方 ...

  5. 问题:如何在固定大小的DIV层插入N多个图片

    这是贴友问的一个问题,具体需求是: 如何在固定大小的DIV层插入N多个图片,使其一行排列,超出层宽时出现滑动条? 原以为利用overflow属性可以实现,但是测试失败.后来利用div层叠实现了效果. ...

  6. Unix System Overview

    一.Unix 体系结构 由上图可以看出,内核居于最里层,Shell,Libary routines,以及Application通过系统调用(system calls)访问内核提供的功能.注意系统调用与 ...

  7. HDU2015校赛 The Country List

    今天手感真差..各种读错题意.水题... 就是说,给你几个串.如果长度一样并且相同位置字符相同(不分大小写)的个数大于两个就是不同串. #include<iostream> #includ ...

  8. 【转载】shell中的特殊变量$

    shell中的特殊变量:变量名含义$0shell或shell脚本的名字$*以一对双引号给出参数列表$@将各个参数分别加双引号返回$#参数的个数$_代表上一个命令的最后一个参数$$代表所在命令的PID$ ...

  9. 【转载】/etc/passwd & /etc/shadow 详解

    转载自:http://blog.csdn.net/snlying/article/details/6130468 1,passwd文件passwd文件存放在/etc目录下.这个文件存放着所有用户帐号的 ...

  10. Esper系列(十三)Splitting and Duplicating Streams

    功能:将同一个事件流分发到其它的事件流中. 格式: 1  ; i < events.length; i++) {   78              EventBean event = even ...