Iconfont

Iconfont 是指用字体文件取代图片文件,来展示图标、特殊字体等元素的一种方法。很多网站都会用它,比如手淘、新浪微博等。

在使用它之前,先来了解一下它的优缺点:

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

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

使用Icon font

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

  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;
 }
挑选图标对应的字体编码,应用于页面中:

<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将都不会渲染任何东西。
有兴趣的同学可以去坑里面走一圈,自己试试坑的深浅。博主就介绍在这里,如果有错误还望大家指出,共同学习。





  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

废柴前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值