详解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美化表单控件全集
Jun 29 HTML / CSS
基于CSS3实现的几个小loading效果
Sep 27 HTML / CSS
CSS3 Backgrounds属性相关介绍
May 11 HTML / CSS
CSS3 选择器 属性选择器介绍
Jan 21 HTML / CSS
CSS中越界问题的经典解决方案【推荐】
Apr 19 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 HTML / CSS
使用CSS变量实现炫酷惊人的悬浮效果
Apr 26 HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
Oct 20 HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
Apr 14 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
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
JavaScript的面向对象(一)
2006/11/09 Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
Jquery实现简单的动画效果代码
2012/03/18 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
如何获取Python简单for循环索引
2019/11/21 Python
python实现宿舍管理系统
2019/11/22 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
Python函数生成器原理及使用详解
2020/03/12 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
python爬虫如何解决图片验证码
2021/02/14 Python
阿迪达斯奥地利官方商城:adidas.at
2016/10/16 全球购物
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
大学英语演讲稿范文
2014/04/24 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
Java 数组内置函数toArray详解
2021/06/28 Java/Android