Fabric.js 使用自定义字体

本文简介

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

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

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

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

创建文本时设置字体

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

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

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

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

先看看本例效果

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

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