您现在的位置: 365建站网 > 365学习 > 什么是Iconfont?Iconfont的好处及使用方法

什么是Iconfont?Iconfont的好处及使用方法

文章来源:365jz.com     点击数:138    更新时间:2018-07-30 09:16   参与评论

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

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

优点:(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>

20180112123636861.jpg

接下面我们再来说说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将都不会渲染任何东西。

有兴趣的同学可以去坑里面走一圈,自己试试坑的深浅。博主就介绍在这里,如果有错误还望大家指出,共同学习。


我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名;

step 1:百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过;

step 2:找到图标管理->我的项目->然后新建项目:

右边点击新建项目,用于保存自己常用的图标;

step 3:项目新建完成后,往项目里添加我们要想使用的图标,找到图标库,搜索一个想要的图标,然后添加到购物车;

 

 我现在将第一个安卓图标加入我的项目,点击加入购物车

step 4:添加到购物车完成后,购物车徽章数字应该显示1了,点击右上角的购物车图标,选择添加至项目,选择我们刚刚创建的项目,确定;

自动跳转到对应的项目里了,如图:

step 5:接下来一部比较关键,将打包好的字体文件下载到本地添加到你的项目中,在项目中引用文件中的iconfont.css文件;

下载下来解压后的文件如下:

强调一次,把上面这些文件都放在一个文件夹内,然后放在你的项目目录中,再在你的项目中引入iconfont.css文件

 

step 6:到了最后一步了,如何在项目中使用字体图标呢,其实很简单,创建一个i标签或者span标签,添加两个类名,一个固定的是iconfont,另一个是你想要的那个图标对应的类名:

具体代码如下:

好了,刷新页面,图标是不是出来了呢?

Ok,到这一步,恭喜你成功了,是不是很简单,不简单?那就从头再看一遍;

调节字体图标的大小是通过元素的font-size属性来控制的;


如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (138人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------