本文簡介

點贊 + 關注 + 收藏 = 學會了

如果你使用 Fabric.js 做編輯類的產品，有可能需要給用戶配置字體。

這次就講講在 Fabric.js 中創(chuàng)建文本時怎么使用自定義字體、在項目運行時怎么修改字體、以及推薦一個精簡字體庫的工具。

學習本文前，你必須有一點 Fabric.js 的基礎，如果沒了解過 Fabric.js 可以閱讀一下 《Fabric.js 從入門到膨脹》

創(chuàng)建文本時設置字體

在 Fabric.js 中使用自定義字體庫時，需要用到 fontfaceobserver.js 這個工具，至于為什么稍后會說到。

在創(chuàng)建文本時就設置字體，需要做以下幾步：

1. 在 CSS 里引入字體。
2. 使用 Fabric.js 創(chuàng)建畫布。
3. 等字體加載完成后再設置文本字體。
4. 將文本添加到畫布中。

在本例中，我使用 IText 創(chuàng)建文本，在創(chuàng)建時通過它的 fontFamily 屬性就可以設置自定義字體。

先看看本例效果

我使用斗魚的字體，聽說是可以免費使用，希望沒騙我～

按照前面說到的步驟去實現(xiàn)：

<style>/* 引入斗魚字體 *//* 我把字體放到本地了，字體路徑你們需要根據(jù)自己的項目去修改 */@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>// 創(chuàng)建畫布const canvas = new fabric.Canvas('c')// 監(jiān)聽斗魚字體加載const douyuFont = new FontFaceObserver('douyu')// 等字體加載完成或者失敗后再執(zhí)行設置字體的douyuFont.load()// 加載成功.then(() => {// 創(chuàng)建文本const iText = new fabric.IText('雷猴', {fontFamily: 'douyu' // 設置字體})// 將文本添加到畫布中canvas.add(iText)})// 加載失敗.catch(() => {console.error('字體加載失敗')})
</script>

因為字體是一種資源文件，引用資源文件就需要時間去加載。

創(chuàng)建畫布渲染文本的速度可能會比加載字體資源快很多，所以需要用到 fontfaceobserver.js 去監(jiān)聽字體加載結果。

• 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() 方法的作用是監(jiān)聽字體加載結果，加載成功就執(zhí)行 then 的代碼，加載失敗就執(zhí)行 catch 代碼。

動態(tài)修改字體

如果需要在項目運行時動態(tài)修改字體，需要做以下幾步：

1. 提前加載好要用的字體庫。
2. 創(chuàng)建畫布。
3. 等字體加載完成后再設置文本字體。
4. 將文本添加到畫布中。
5. 修改字體前，先獲取要修改的文本元素。
6. 使用 set 方法設置文本的 fontFamily 屬性。
7. 刷新畫布。

本例用到斗魚和阿里的字體，我查過了，說是免費使用。

根據(jù)上面提到的幾步動手編碼

<style>/* 我把字體放到本地了，字體路徑你們需要根據(jù)自己的項目去修改 *//* 引入斗魚字體 */@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>// 創(chuàng)建畫布const canvas = new fabric.Canvas('c')// 創(chuàng)建文本const iText = new fabric.IText('雷猴')// 將文本添加到畫布中canvas.add(iText)// 設置字體function setFont(font) {// 監(jiān)聽當前要設置的字體加載情況let fontFamily = new FontFaceObserver(font)// 加載完成后執(zhí)行fontFamily.load()// 加載成功.then(() => {let target = canvas.getActiveObject()if (target) {target.set("fontFamily", font)canvas.requestRenderAll()}})// 加載失敗.catch(() => {console.error('字體加載失敗')})}
</script>

精簡字體庫

關于 Fabric.js 如何使用自定義字體庫的內容說完了，但日常工作中我還遇到一個問題：某些特定地方會使用一些特殊字體，比如數(shù)字、項目名等地方。

通常字體庫會包含大量字體，但實際項目中可能只有幾個字會用到特殊字體。

經過我長時間的審問，一位不愿透露姓名的網友終于透露出他用到精簡字體庫的工具

Fontmin 有客戶端，也可以直接使用終端操作。

客戶端也提供了mac和windows兩個版本，操作起來非常簡單。有需要的工友可以打開鏈接獲取。

• Fontmin官網
• Fontmin github地址

代碼倉庫

本文完整代碼可通過下方鏈接獲取。

? Fabric.js 使用自定義字體

推薦閱讀

👍《Fabric.js 從入門到_ _ _ _ _ _》

👍《Fabric.js 樣式不更新怎么辦？》

👍《Fabric.js 自定義控件》

👍《Fabric.js 講解官方demo：Stickman》

👍《Fabric.js 拖拽頂點修改多邊形形狀》

👍《Fabric.js 復制粘貼元素》

點贊 + 關注 + 收藏 = 學會了 代碼倉庫