Fabric.js 使用自定义字体

本文简介

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

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

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

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

创建文本时设置字体

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

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

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

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

先看看本例效果

file

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

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

<style>
  /* 引入斗鱼字体 */
  /* 我把字体放到本地了，字体路径你们需要根据自己的项目去修改 */
  @font-face {
    font-family: douyu;
    src: url('../../fonts/douyu.ttf');
  }
</style>

<!-- 画布元素 -->
<canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas>

<!-- 引入 fontfaceobserver.js 和 fabric.js -->
<script src="../../script/fontfaceobserver.js"></script>
<script src="../../script/fabric.js"></script>

<script>
    // 创建画布
    const canvas = new fabric.Canvas('c')

  // 监听斗鱼字体加载
  const douyuFont = new FontFaceObserver('douyu')

  // 等字体加载完成或者失败后再执行设置字体的
  douyuFont.load()
      // 加载成功
    .then(() => {
        // 创建文本
        const iText = new fabric.IText('雷猴', {
          fontFamily: 'douyu' // 设置字体
        })
      // 将文本添加到画布中
      canvas.add(iText)
      })
      // 加载失败
      .catch(() => {
        console.error('字体加载失败')
      })
</script>

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

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

fontfaceobserver.js 官网
fontfaceobserver.js github地址

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

简单的用法如下：

<style>
  @font-face {
    font-family: 自定义字体名;
    src: url('字体包路径');
  }
</style>

<script>
const font = new FontFaceObserver('自定义字体名')

font.load()
  .then()
  .catch()
</script>

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

动态修改字体

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

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

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

file

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

<style>
  /* 我把字体放到本地了，字体路径你们需要根据自己的项目去修改 */
  /* 引入斗鱼字体 */
  @font-face {
    font-family: douyu;
    src: url('../../fonts/douyu.ttf');
  }
  /* 引入阿里字体 */
  @font-face {
    font-family: ali;
    src: url('../../fonts/AlibabaPuHuiTi-2-35-Thin.ttf');
  }
</style>

<!-- 设置字体的按钮 -->
<button οnclick="setFont('douyu')">斗鱼</button>
<button οnclick="setFont('ali')">阿里</button>

<!-- 画布元素 -->
<canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas>

<!-- 引入 fontfaceobserver.js 和 fabric.js -->
<script src="../../script/fontfaceobserver.js"></script>
<script src="../../script/fabric.js"></script>

<script>
    // 创建画布
    const canvas = new fabric.Canvas('c')
  // 创建文本
  const iText = new fabric.IText('雷猴')
  // 将文本添加到画布中
  canvas.add(iText)

  // 设置字体
  function setFont(font) {
    // 监听当前要设置的字体加载情况
    let fontFamily = new FontFaceObserver(font)

    // 加载完成后执行
    fontFamily.load()
        // 加载成功
      .then(() => {
        let target = canvas.getActiveObject()
        if (target) {
          target.set("fontFamily", font)
          canvas.requestRenderAll()
        }
      })
        // 加载失败
      .catch(() => {
        console.error('字体加载失败')
      })
  }
</script>