一、前言

说起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. HDU 5007 Post Robot

    Post Robot Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total ...

  2. Kettle简介

    ETL和Kettle简介     ETL即数据抽取(Extract).转换(Transform).装载(Load)的过程.它是构建数据仓库的重要环节.数据仓库是面向主题的.集成的.稳定的且随时间不断变 ...

  3. MapReduce自定义二次排序流程

    每一条记录开始是进入到map函数进行处理,处理完了之后立马就入自定义分区函数中对其进行分区,当所有输入数据经过map函数和分区函数处理完之后,就调用自定义二次排序函数对其进行排序. MapReduce ...

  4. 【译】 AWK教程指南

    前面的话: 这几天写了一个程序,在同一个目录里生成了很多文件,需要统计其中部分文件的总大小,发现经常用到的ls.du等命令都无济于事,我甚至都想到了最笨的方法,写一个脚本:mkdir一个新目录,把要统 ...

  5. 怎么限制Google自动调整字体大小

    Google默认的字体大小是12px,当样式表中font-size<12px时,或者没有明确指定字体大小,则在chrome浏览器里字体显示是12px. 最近在写代码玩的时候,我也碰到了 在FF和 ...

  6. oracle表分析

    analyze table tablename compute statistics; analyze index indexname compute statistics; 对于使用CBO很有好处, ...

  7. matlab 函数说明—conv2

    conv 是卷积的意思,2表示2维卷积.   conv2的调用形式如下: 1. C = conv2(A,B) 这是最简单的一种调用形式,B作为卷积核在A的范围内滑动,若[ma na] =size(A) ...

  8. VisualStudio2010中创建ASP.Net WebService

    相关资料:http://blog.csdn.net/yapingxin/article/details/7331375 具体操作:1.打开“Microsoft Visual Studio 2010”- ...

  9. CSS层叠样式选择器归纳

     常用选择器 1.1 类型选择器:用来寻找特定类型的元素  标签 { 声明 } p { color:black; } h1 { font-weight:bold; } 1.2 后代选择器: 选择一个元 ...

  10. 在idea中如何添加log日志

    1.首先下载log4的jar包,官方路径为:http://www.apache.org/dyn/closer.cgi/logging/log4j/1.2.17/log4j-1.2.17.zip 2.下 ...