web性能优化之字体图标

作者: Timeless 更新时间: 阅读量: 28

1、Iconfont

1.1iconfont的优缺点

大小可以自由地变化,做移动端项目就可以不用准备多尺寸的素材 
颜色可以自由地修改 
添加阴影效果 
*IE6也可以支持 
支持一些CSS3对文字的效果 
字体文件比图片文件小很多 
由于是字体,所以只可以显示纯色图片,不支持多种颜色的图片(缺点)

1.2资源:

阿里妈妈iconfont 
这个是阿里妈妈M2UX的一个icon font字体图标字库,包含了淘宝图标库和阿里妈妈图标库。

fontello 
在线定制你自己的icon font字体图标字库,也可以直接从GitHub下载整个图标集,该项目也是开源的。

icomoon 
可以在线导入的SVG格式字体,并进行编辑,然后下载来使用。

Font-Awesome

1.3阿里巴巴Iconfont使用

1、打开 http://iconfont.cn,然后登录自己的帐号,当然如果只是下载单个图标可以不用登录,可以使用GitHub或者新浪微博等帐号登录。

QQ截图20180408085919.jpg

2、登录后,导航菜单 图标管理 -- 我的项目里面新建一个项目

QQ截图20180408090151.jpg

3、搜索自己需要的图标,然后点击添加到库

QQ截图20180408090327.jpg

4、点击导航栏的购物车按钮,把刚刚添加到库的图标移入你的项目

QQ截图20180408090443.jpg

5、然后到你的项目里面,可以看到刚刚的图标以及在线代码,你可以删除、修改项目里面的图标,在线使用时记得更新在线链接~

QQ截图20180408090616.jpg

unicode、css、js 三种方式的使用方法如下

2、unicode字符的不同表示法

unicode字符在html、css和js中的表示方法均不相同,下面分别作介绍。

2.1. css表示法

首先来一段很常见的bootstrap的字体图标代码:

.glyphicon-home:before {content: "\e021";}

上面代码中的e021就是这个字符的unicode码,是16进制。

语法:

'\ + 16进制的unicode编码'

如:’\5b89’表示汉字“安”:

<style>
    .test: before {content: "\e021";}
</style>
<div class="test"></div>

2.2. js表示方法

语法:

'\u + 16进制的unicode编码'
// 如:'\u5b89'表示汉字“安”console.log('\u5b89'); // 输出“安”

2.3. html表示方法

html特殊一点,使用的是10进制,一开始没注意这个搞的半天出不来郁闷很久。

语法:

'&# + 10进制的unicode编码 + 英文分号;'

如项目中要用到的一个字体图标,unicode编码是E622,16进制转为10进制得58914(进制转换自个忙活哈);结尾的分号经测试不加也没问题,但是最好还是加一下。

(有时候在html里面看到一个方框,但是你想知道它的unicode编码,可以使用word,利用ALT+X组合键可以在字符和UNICODE 之间切换)

@font-face {
    font-family: 'iconfont'; 
    src: url('xxxxxxxxxxx');
}
.iconfont{
    font-family: 'iconfont'; 
    font-weight: normal;
    vertical-align: middle;
}
<p class="iconfont">&#58914;</p>

也许你要用到查看字符编码集的软件,用来得到字符图标的unicode编码: 
FontCreator, FontLab Studio, FontForge