详解CSS中iconfont的使用


Posted in HTML / CSS onAugust 04, 2015

初识iconfont

就算我们一开始不懂这个英文不懂是干嘛的,对于iconfont,英文从后往前读应该叫做:字体图标。这里面已经包含两个概念,首先必须是字体,第二,就是图标。我们都知道网页中的字体我们可以控制大小、样式、变形、拉伸、默认字体等属性,所以这个iconfont必须是以文字嵌入到样式中,所以想到的必须是font;既然是图标那么它就必须有一个路径来引入进来,首先我们一开始想到的img这个标签,既然又是文字又是图标,我们能想到的就只有这个@font-facecss3属性。

还有这个iconfont后来词语,并不是一开始就出现的,网页制作者或者学者想要叫起来更爽口所赋予的一个表现层的东西。

所以,当我们看见阿里巴巴的iconfont的图标教程如下:

第一步:使用font-face声明字体

CSS Code复制内容到剪贴板
  1. @font-face {font-family'iconfont';   
  2.     srcurl('iconfont.eot'); /* IE9*/  
  3.     srcurl('iconfont.eot?#iefix'format('embedded-opentype'), /* IE6-IE8 */  
  4.     url('iconfont.woff'format('woff'), /* chrome、firefox */  
  5.     url('iconfont.ttf'format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/  
  6.     url('iconfont.svg#uxiconfont'format('svg'); /* iOS 4.1- */  
  7. }  

第二步:定义使用iconfont的样式

CSS Code复制内容到剪贴板
  1. .iconfont{   
  2.     font-family:"iconfont" !important;   
  3.     font-size:16px;font-style:normal;   
  4.     -webkit-font-smoothing: antialiased;   
  5.     -webkit-text-stroke-width: 0.2px;   
  6.     -moz-osx-font-smoothing: grayscale;}  

第三步:挑选相应图标并获取字体编码,应用于页面

CSS Code复制内容到剪贴板
  1. <i class="iconfont">#x33</i>  

效果如下
详解CSS中iconfont的使用

但是,Iconfont存在一些弊端:

    浏览器将其视为文字进行抗锯齿优化,有时得到的效果并没有想象中那么锐利。 尤其是在不同系统下对文字进行抗锯齿的算法不同,可能会导致显示效果不同。
    Icon Font 作为一种字体,Icon 显示的大小和位置可能要受到font-size、line-height、word-spacing等等 CSS 属性的影响。 Icon 所在容器的 CSS 样式可能对 Icon 的位置产生影响,调整起来很不方便。
    使用上存在不便。首先,加载一个包含数百图标的 Icon Font,却只使用其中几个图标,非常浪费加载时间。 如果是自己制作 Icon Font 以及把多个 Icon Font 中用到的图标整合成一个 Font 也非常不方便。当然使用阿里UX矢量图标库可以解决这个问题
    为了实现最大程度的浏览器支持,可能要提供至少四种不同类型的字体文件。包括TTF、WOFF、EOT 以及一个使用 SVG 格式定义的字体。如果是自己制作的话,可能要头疼死

HTML / CSS 相关文章推荐
css3背景图片透明叠加属性cross-fade简介及用法实例
Jan 08 HTML / CSS
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 HTML / CSS
纯css3实现图片翻牌特效
Mar 10 HTML / CSS
CSS3模拟IOS滑动开关效果
Sep 28 HTML / CSS
CSS3田字格列表的样式编写方法
Nov 22 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
Apr 10 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
Nov 09 HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 HTML / CSS
详解Html5项目适配系统深色模式方案总结
Apr 14 HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
Apr 27 HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 #HTML / CSS
CSS3的一个简单导航栏实现
Aug 03 #HTML / CSS
使用CSS3和Checkbox实现JQuery的一些效果
Aug 03 #HTML / CSS
CSS3中的clip-path使用攻略
Aug 03 #HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 #HTML / CSS
CSS3中的content属性使用示例
Jul 20 #HTML / CSS
详解CSS3中border-image的使用
Jul 18 #HTML / CSS
You might like
PHP session常见问题集锦及解决办法总结
2007/03/18 PHP
两款万能的php分页类
2015/11/12 PHP
谈谈PHP中substr和substring的正确用法及相关参数的介绍
2015/12/16 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
node.js+jQuery实现用户登录注册AJAX交互
2017/04/28 jQuery
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
JS document内容及样式操作完整示例
2020/01/14 Javascript
Python中的XML库4Suite Server的介绍
2015/04/14 Python
python引用DLL文件的方法
2015/05/11 Python
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
python先序遍历二叉树问题
2017/11/10 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
python实现在函数图像上添加文字和标注的方法
2019/07/08 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
美国时尚在线:Showpo
2017/09/08 全球购物
毕业生自荐信的主要内容
2013/10/29 职场文书
母亲七十大寿答谢词
2014/01/18 职场文书
秋季运动会广播稿
2014/02/22 职场文书
晋江市委常委班子四风问题整改工作方案
2014/10/26 职场文书
考研英语复习计划
2015/01/19 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
大学生受助感言
2015/08/01 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang
MySQL的存储函数与存储过程的区别解析
2022/04/08 MySQL