阿荡的个人网站

Appearance

iconfont的实现原理

引言 ​

在现代网页开发中，图标字体（iconfont）已经成为不可或缺的技术方案。它既能保证图标的清晰度，又能实现灵活的样式控制。那么，SVG 图标是如何转换成网页中的图标字体的呢？让我们一起来探索这个有趣的过程。

图标字体的使用场景 ​

当我们使用某个图标库时，通常需要引入一个外部样式文件：

html
<link type="text/css" rel="stylesheet" href="https://****/icons.css" />

然后，通过简单的类名就能生成一个图标：

html
<i class="icon icon-add"></i>

显示效果如下：

这些图标库提供了丰富的图标资源，大大简化了我们的开发工作。

背后的原理 ​

让我们通过浏览器开发者工具来查看上述 <i> 元素的样式。类名 .icon 和 .icon-add 的 CSS 规则如下（仅展示关键部分）：

css
.icon {
  font-family: "MyIcons";
  font-size: 24px;
}

.icon-home::before {
  content: "\f101";
}

这里的关键在于：

  • .icon 类为元素设置了特定的字体族（font-family）
  • .icon-add::before 伪元素通过 content 属性指定了一个 Unicode 编码 \f101

当浏览器渲染这个伪元素时，会从 "MyIcons" 字体文件中查找编码 \f101 对应的图标，然后将找到的图标渲染到页面上。

从 SVG 到图标字体 ​

了解了基本原理后，我们就可以开始制作自己的图标字体了。首先，我从网上下载了一个添加操作的图标，命名为 add.svg，并将其放置在 icons 目录下。

使用 fantasticon 工具 ​

fantasticon 是一个非常优秀的工具，它能够将 SVG 文件转换为图标字体，并自动生成相应的样式文件。

在项目根目录下创建 fonts 目录，然后执行以下命令：

shell
npx fantasticon ./icons --output ./fonts --name my-icon-font --font-types ttf --prefix icon

生成的文件 ​

执行成功后，fonts 目录下会自动生成以下文件：

  • my-icon-font.css - 样式文件
  • my-icon-font.html - 示例文件
  • my-icon-font.json - 配置文件
  • my-icon-font.ts - TypeScript 类型定义
  • my-icon-font.ttf - 字体文件

样式文件分析 ​

让我们查看生成的 my-icon-font.css 文件内容：

css
@font-face {
  font-family: "my-icon-font";
  src: url("./my-icon-font.ttf?77cbbb8b5fe910e7a33e0348025d074d") format("truetype");
}

i[class^="icon-"]:before,
i[class*=" icon-"]:before {
  font-family: my-icon-font !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-add:before {
  content: "\f101";
}

这个样式文件包含了：

  1. @font-face 声明：定义了字体族和字体文件的路径
  2. 通用样式：为所有以 icon- 开头的类名设置基础样式
  3. 具体图标样式：为每个图标定义对应的 Unicode 编码

在网页中引入这个 CSS 文件后，使用 .icon-add 类名就能显示对应的图标。my-icon-font.html 文件中提供了详细的使用示例。

深入探索字体文件 ​

字体文件的结构 ​

普通的文本编辑器无法直接打开 .ttf 字体文件，但我们可以借助 FontDrop 这个在线工具来查看字体文件的内部结构。

从图中可以看出，字体文件包含了：

  • Unicode 映射表：每个图标的名称与索引的对应关系
  • 轮廓数据（Contours Data）：用于绘制图标的具体指令

SVG 与字体文件的转换 ​

在原始的 SVG 文件中，图标是通过 <path> 标签来描述轮廓的：

svg
<path d="M12 2C13.1 2 14 2.9 14 4V20C14 21.1 13.1 22 12 22C10.9 22 10 21.1 10 20V4C10 2.9 10.9 2 12 2Z"/>

而在 TTF 字体文件中，同样的图标信息被转换为一组绘制指令，这些指令告诉渲染引擎如何绘制出相同的图形。

总结 ​

图标字体的渲染过程可以概括为以下几个步骤：

  1. 字体选择：浏览器根据 CSS 中的 font-family 属性确定使用的字体
  2. 编码查找：根据伪元素的 content 属性中的 Unicode 编码，在字体文件中查找对应的映射关系
  3. 位置定位：找到编码对应的图标位置信息
  4. 图形绘制：根据图标的轮廓数据，将图标绘制到屏幕上

通过这种方式，我们成功地将 SVG 图标转换为了可复用的图标字体。随着图标数量的增加，重复上述操作，我们就能构建出属于自己的完整图标库。

更新时间: