12-2-CSS 字体图标-编程知识

个人主页：学习前端的小z
个人专栏：HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结，欢迎大家在评论区交流讨论！

文章目录

CSS 字体图标
- 1 字体图标的产生
- 2 字体图标的优点
- 3 字体图标的下载
- 4 字体图标的引入
- - 4.1 Unicode 引用
  - 4.2 font-class 引用
- 5 字体图标的追加

CSS 字体图标

1 字体图标的产生

字体图标使用场景：主要用于显示网页中通用、常用的一些小图标。

精灵图是有诸多优点的，但是缺点很明显。

图片文件还是比较大的。
图片本身放大和缩小会失真。
一旦图片制作完毕想要更换非常复杂。

此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont。

字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

2 字体图标的优点

字体图标较于精灵图的优点：

字体图标追加方便
字体图标不会失真

轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求

灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等

兼容性：几乎支持所有的浏览器，请放心使用

注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

总结：

如果遇到一些结构和样式比较简单的小图标，就用字体图标。图标非常简单的时候使用字体图标。
如果遇到一些结构和样式复杂一点的小图片，就用精灵图。图标比较复杂的时候使用精灵图。
我们能使用字体图标的时候，尽量就不用精灵图

字体图标加载的原理

页面链接相应的字体文件，再对字体文件中的编码进行解析。

src = “aaaa.font” —> 链接字体文件
浏览器对链接字体文件进行解析，解析字体文件里面的编码
比如：aaaa.font 里面有3个编码，分别是 a,b,c，那么我们去使用 a —> a这个字体图标，同理用bc

3 字体图标的下载

阿里 iconfont 字库

iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具

这个是阿里妈妈 M2UX 的一个 iconfont 字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用 AI 制作图标上传生成。重点是，免费！

4 字体图标的引入

下载完毕之后，注意原先的文件不要删，后面追加可能会用到。

4.1 Unicode 引用

Unicode 是字体在网页端最原始的应用方式，特点是：

支持按字体的方式去动态调整图标大小，颜色等等。
默认情况下不支持多色，直接添加多色图标会自动去色。

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

Unicode 使用步骤如下：

第一步：拷贝项目下面生成的 @font-face

@font-face它是一个css3的引入第三方字体的扩展样式

@font-face {font-family: 'iconfont';src: url('iconfont.eot?t=1678946737539'); /* IE9 */src: url('iconfont.eot?t=1678946737539#iefix') format('embedded-opentype'), /* IE6-IE8 */url('iconfont.woff2?t=1678946737539') format('woff2'),url('iconfont.woff?t=1678946737539') format('woff'),url('iconfont.ttf?t=1678946737539') format('truetype'),url('iconfont.svg?t=1678946737539#iconfont') format('svg');
}

不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。

TureType(.ttf)格式.ttf字体是Windows和Mac的最常见的字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
Web Open Font Format(.woff)格式woff字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
Embedded Open Type(.eot)格式.eot字体是IE专用字体，支持这种字体的浏览器有IE4+；
SVG(.svg)格式.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

取值：

字体描述值说明
font-family name 必需的。定义字体的名称。
src URL 必需的。定义该字体下载的网址（S）

https://www.runoob.com/cssref/css3-pr-font-face-rule.html

在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。

大多数场景下，@font-face都是用于字体图标。

实际工作中的大多数应用需求，直接使用系统字体即可，极少数需要特殊定制，那么设计师会给出相关字体进行引入即可。

字体描述	值	说明
font-family	name	必需的。定义字体的名称。
src	URL	必需的。定义该字体下载的网址（S）

第二步：定义使用 iconfont 的样式

.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased; /*这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。这个设定在ios中表现比较明显，在windows中表现的不明显。*/-moz-osx-font-smoothing: grayscale; /*这个属性是火狐搞的, grayscale抗锯齿*/
}

第三步：挑选相应图标并获取字体编码，应用于页面

&; 是html里面编码必须的
#x 表示后面的编码是一个十六进制数字

<span class="iconfont">&#x33;</span>

4.2 font-class 引用

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

与 Unicode 使用方式相比，具有如下特点：

相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。

使用步骤如下：

第一步：引入项目下面生成的 fontclass 代码：

<link rel="stylesheet" href="./iconfont.css">

第二步：挑选相应图标并获取类名，应用于页面：

<span class="iconfont icon-xxx"></span>

5 字体图标的追加

iconfont图标的追加：

将所选择的图标加入某个项目，当未来需要添加的图标时，可以选择入这个项目，重新下载并覆盖。

在这里插入图片描述

浏览器第一次链接这个字体文件会进行缓存，如果后期新增就需要强制刷新 ctrl + f5