Fabric.js 使用自定义字体

---

theme: smartblue

本文简介

点赞 + 关注 + 收藏 = 学会了

如果你使用 Fabric.js 做编辑类的产品，有可能需要给用户配置字体。

这次就讲讲在 Fabric.js 中创建文本时怎么使用自定义字体、在项目运行时怎么修改字体、以及推荐一个精简字体库的工具。

学习本文前，你必须有一点 Fabric.js 的基础，如果没了解过 Fabric.js 可以阅读一下 《Fabric.js 从入门到膨胀》

创建文本时设置字体

在 Fabric.js 中使用自定义字体库时，需要用到 fontfaceobserver.js 这个工具，至于为什么稍后会说到。

在创建文本时就设置字体，需要做以下几步：

1. 在 CSS 里引入字体。
2. 使用 Fabric.js 创建画布。
3. 等字体加载完成后再设置文本字体。
4. 将文本添加到画布中。

在本例中，我使用 IText 创建文本，在创建时通过它的 fontFamily 属性就可以设置自定义字体。

先看看本例效果

我使用斗鱼的字体，听说是可以免费使用，希望没骗我～

按照前面说到的步骤去实现：

```html

```

因为字体是一种资源文件，引用资源文件就需要时间去加载。

创建画布渲染文本的速度可能会比加载字体资源快很多，所以需要用到 fontfaceobserver.js 去监听字体加载结果。

• fontfaceobserver.js 官网
• fontfaceobserver.js github地址

fontfaceobserver.js 的详细用法可以点击上面的官网查阅。

简单的用法如下：

```html

```

load() 方法的作用是监听字体加载结果，加载成功就执行 then 的代码，加载失败就执行 catch 代码。

动态修改字体

如果需要在项目运行时动态修改字体，需要做以下几步：

1. 提前加载好要用的字体库。
2. 创建画布。
3. 等字体加载完成后再设置文本字体。
4. 将文本添加到画布中。
5. 修改字体前，先获取要修改的文本元素。
6. 使用 set 方法设置文本的 fontFamily 属性。
7. 刷新画布。

本例用到斗鱼和阿里的字体，我查过了，说是免费使用。

根据上面提到的几步动手编码

```html

斗鱼 阿里

```

精简字体库

关于 Fabric.js 如何使用自定义字体库的内容说完了，但日常工作中我还遇到一个问题：某些特定地方会使用一些特殊字体，比如数字、项目名等地方。

通常字体库会包含大量字体，但实际项目中可能只有几个字会用到特殊字体。

经过我长时间的审问，一位不愿透露姓名的网友终于透露出他用到精简字体库的工具

Fontmin 有客户端，也可以直接使用终端操作。

客户端也提供了mac和windows两个版本，操作起来非常简单。有需要的工友可以打开链接获取。

• Fontmin官网
• Fontmin github地址

代码仓库

本文完整代码可通过下方链接获取。

⭐ Fabric.js 使用自定义字体

推荐阅读

《Fabric.js 从入门到_ _ _ _ _ _》

《Fabric.js 样式不更新怎么办？》

《Fabric.js 自定义控件》

《Fabric.js 讲解官方demo：Stickman》

《Fabric.js 拖拽顶点修改多边形形状》

《Fabric.js 复制粘贴元素》

点赞 + 关注 + 收藏 = 学会了