首页技术文章正文

Web前端培训：如何使用Iconfont实现字体图标?

更新时间:2019年01月22日16时25分来源:传智播客浏览次数:

首先,我们先看了解一下什么是 IconFont：

IconFont 就是字体图标。严格地说，就是一种字体，但是，这种字体不包含字母或数字，而是包含符号和字形。您可以使用 CSS 设置样式，就像设置常规文本一样，这使得 IconFont 成为 Web 开发时图标的热门选择。

接着,我们来看下网站中哪些地方是用了字体图标的：

IconFont 的产生的背景：

我们都知道，在网页制作中，会经常用到不同的字体，常用的有微软雅黑、宋体、Aria 等等。在我们写css的样式的时候，通过 font-family 可以指定元素的字体名称，我们称这类字体为 WebFont。但是传统的web开发人员的字体选择是有限的。只有少数几种字体可以保证在所有公共系统中都可以使用——这就是所谓的 Web-safe 字体。

IconFont 的使用原理: 来自于 css 的 @font-face 属性。这个属性用来定义一个新的字体，基本用法如下：

@font-face {
 font-family: <YourFontName>;
 src: <url> [<format>],[<source> [<format>]], *;
 [font-weight: <weight>];
 [font-style: <style>];
}

font-family：为载入的字体取名字。

src：[url]加载字体，可以是相对路径，可以是绝对路径，也可以是网络地址。[format]定义的字体的格式，用来帮助浏览器识别。主要取值为：【truetype(.ttf)、opentype(.otf)、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)】。

font-weight：定义加粗样式。

font-style：定义字体样式。

format对应字体格式以及常见兼容性写法：

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

IconFont 的优缺点：

1. 可以通过css的样式改变其颜色(最霸气的理由)

2. 相对于图片来说,具有更高的分辨率

3. 更小的存储

4. 缺点:浏览器兼容性不够普及,所幸目前大部分主流浏览器都支持

本文主要讲解如何使用网站阿里 IconFont提供的字体图标

步骤分为如下4步：

1. 下载字体图标

2. 部署字体图标到我们的HTML文件中

3. 修改字体图标颜色及大小

4. 另一个常用的字体图标库Font Awesome

一. 第一步 —— 下载字体图标

目标 : 通过网址添加所需的字体图标到购物车,并登录账户下载代码

1.打开 www.iconfont.cn/

2. 输入你要使用字体图标的关键字

3. 鼠标移上某个图标以后,添加购物车即可

4. 如此类推,我们添加多几个图标,添加完以后可以点击购物车图标查看已添加的所有字体图标

5.选择下载代码,但是会要求你登录账号, 推荐使用新浪微博账号登录

6.下载得到的是一个压缩包,解压即可

7. 文件简单说明

小结 : 从阿里图标库中下载想要的字体图标到自己的电脑上,建议使用新浪微博账号登录。

二. 第二步 —— 部署字体图标到我们的HTML文件中

目标：根据官方提供的使用说明,部署字体图标到我们的HTML文件中

1. 我们把相关的字体文件都放进一个fonts目录下

2. 创建HTML页面

3. 打开官方提供的说明文档,并查看具体引用步骤

4. 拷贝项目下面生成的 @font-face,需要注意的是字体文件的存放路径！

      @font-face {
    font-family: 'iconfont';
    src: url('./fonts/iconfont.eot');
    src: url('./fonts/iconfont.eot?#iefix') format('embedded-opentype'),
        url('./fonts/iconfont.woff2') format('woff2'),
        url('./fonts/iconfont.woff') format('woff'),
        url('./fonts/iconfont.ttf') format('truetype'),
        url('./fonts/iconfont.svg#iconfont') format('svg');
}