在看别人 github 项目的时候，看到了 iconfont，百度了一下是阿里的图标库，这个很容易理解，但是自己操作一遍之后发现下载下来的目录还包含了 .eot、.woff 等文件，对于这些新东西感到有些陌生，在经过一番查找之后有所得，整理思路，记录于此。

一、Iconfont

1. 概述

在前端作业中，二十年前只有页面中铺满文字就算上线产品，现如今，不加点俏皮的“图标”会让页面显得很 Low 很 Low。

图标

在写这篇文章之前，我一直以为上图中的“图标”是一个个的图片组成，但学习总是给人新知，现在我知道了它们只是一种字体，类似于“宋体”、“楷体”这种。如果我们要使用它们，也只需要在 css 文件中使用 @font-face 引入这种字体即可。@font-face 是 css3 的一个语法，刚兴趣的可以自行阅读 @font-face 用法。

2. Iconfont 介绍

Iconfont 是阿里提供了一个图标库，你可以想象成是一个售卖图标的超市，挑选你需要的图标放入购物车，然后 Iconfont 会为你打包你购物车里的图标，自动生成一种新的字体，你可以选择下载到本地，在你的项目中引入这种字体，这样即便没有网络的情况也可以使用图标。

这种模式的一大优点就是只挑选出需要的图标，不会像其他图标库那样直接下载一整个图标库的内容，尽管你可能只会使用到其中一到两个图标。要知道，有的项目打包上线对大小是有严格要求的，比如微信小程序打包之后的代码大小就要控制在 1 M以下。

关于如何使用 Iconfont，网络已经有人赘述的很详细了，这里就不再重复。具体步骤参阅： iconfont字体图标的使用方法。

注：除了阿里的 Iconfont，Bootstrap 的图标是 Font-Awsome。

二、字体格式 —— .eot、.woff、.ttf、.svg

1. 概述

在阿里图标库中下载图标到本地后，目录结构如下：

图标库下载到本地目录结构

第一次看到这几个文件时，不知道有什么用，可能会直接删除，但万万不可，打开 iconfont.css 文件可以在 @font-face 中都有引用这几个文件。查询资料后得知：虽然现代浏览器支持自定义字体样式，并且可以通过 @font-face 引入自定义的字体，但是各个浏览器对于字体样式是存在兼容性问题的，而这几个文件就是分别处理对应浏览兼容性问题的。

2. 字体格式介绍

目前最主要的几种网络字体(web font)格式包括WOFF，SVG，EOT，OTF/TTF。

WOFF

WOFF是Web Open Font Format几个词的首字母简写。这种字体格式专门用于网上，由Mozilla联合其它几大组织共同开发。WOFF字体通常比其它字体加载的要快些，因为使用了OpenType (OTF)和TrueType (TTF)字体里的存储结构和压缩算法。这种字体格式还可以加入元信息和授权信息。这种字体格式有君临天下的趋势，因为所有的现代浏览器都开始支持这种字体格式。【支持的浏览器：IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】

SVG / SVGZ

Scalable Vector Graphics (Font). SVG是一种用矢量图格式改进的字体格式，体积上比矢量图更小，适合在手机设备上使用。【支持的浏览器：Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】

EOT

Embedded Open Type。这是微软创造的字体格式。这种格式只在IE6-IE8里使用。【支持的浏览器：IE4+】

OTF / TTF

OpenType Font 和 TrueType Font。部分的因为这种格式容易被复制(非法的)，这才催生了WOFF字体格式。然而，OpenType有很多独特的地方，受到很多设计者的喜爱。【支持的浏览器：IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】

3. 使用 @font-face 引入字体格式

因为各个浏览器对字体格式的不兼容，作为前端开发人员，我们需要考虑的全面性，将各个格式的字体都引入进来，这样就不怕刁钻的用户使用哪种浏览器了。

常见兼容性写法：

@font-face {font-family: 'yourfontname';src: url('../fonts/singlemalta-webfont.eot');src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/singlemalta-webfont.woff') format('woff'),url('../fonts/singlemalta-webfont.ttf') format('truetype'),url('../fonts/singlemalta-webfont.svg#defineName') format('svg');font-weight: normal;font-style: normal;
}

如果你是使用 Iconfont 下载字体到本地，那么恭喜你，打开 iconfont.css 文件，可以看到 Iconfont 已经帮助你配好了这些内容，你只需要在页面中引入 iconfont.css 即可直接使用。

基本使用：》》》》》》》》》》》》》》》》》》

我之前因为项目用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属性来控制的;

iconfont介绍及基本使用相关推荐

iconfont 介绍
最近公司的设计人员想要把网站上面的小图标都改为iconfont,我也做了一篇PPT分享给大家,如果现在不记下来,可能过几个月就忘得一干二净了一· 现代设计的趋势我们知道,传统设计的思路是拟物化,就 ...
fontcreator制作iconfont(包含两个教程)
第一步在AI中画好矢量图,或者是在PS中将纯色的图片存成PNG格式,最好是放大很多倍的纯色图片.因为导入到fontcreator中会显得很小,如果不是矢量,图片拉大后就会有锯齿状. 第二步选中AI ...
自动化工程师必备的效率工具-第②期
JZGKCHINA 工控技术分享平台尊重原创勿抄袭勿私放其他平台本期,继续为咱们从事工控的小伙伴准备了一份搞项目.搞程序.搞调试必备且实用的电脑软件工具清单,在项目应用上绝对能让你省事省心,一 ...
iconfont+svg矢量图使用与介绍
目录准备工作三种基本的使用方法 Unicode引入 font-class引入 Symbol引入彩色模式总结准备工作首先进入阿里巴巴的iconfont的官网,如果没有账号的话就先注册账号找 ...
icon-font图标介绍
http://www.cnblogs.com/tblog/p/4738816.html 前言像素完美(Pixel Perfection).分辨率无关(Resolution Independent)和 ...
阿里iconfont官网提供的矢量图标用法介绍
阿里iconfunt官网对于图标的调用写的不够详细,许多初用者不会用,下面具体介绍下总结的两种方法: 在线调用方式 1.首先建立新浪微博账号,用微博号登录iconfunt官网: 2.所需要图标加入购物 ...
阿里妈妈字体图标（iconfont）使用介绍
提起字体图标,大家首先想到的可能是 Font Awesome, 但由于Font Awesome图标数量太多,多达近千个,但往往我们的项目中只用到其中的几个,这使得Font Awesome对我们来说显得 ...
优秀工具介绍之——Iconfont 阿里图标库
阿里妈妈MUX倾力打造的矢量图标管理.交流平台. 设计师将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用. 官网地址: h ...
iconfont的使用（详细介绍）
今天看iconfont的使用视频,有点断片,记得基础班没有讲过,可能是资源丢掉了,总结一下使用过程. 下面是网站地址 https://www.iconfont.cn/ 使用需要登录账号,可以使用git ...

iconfont介绍及基本使用

一、Iconfont

1. 概述

2. Iconfont 介绍

二、字体格式 —— .eot、.woff、.ttf、.svg

1. 概述

2. 字体格式介绍

3. 使用 @font-face 引入字体格式

基本使用：》》》》》》》》》》》》》》》》》》

iconfont介绍及基本使用相关推荐

最新文章

热门文章