本文簡(jiǎn)介

點(diǎn)贊 + 關(guān)注 + 收藏 = 學(xué)會(huì)了

如果你使用 Fabric.js 做編輯類(lèi)的產(chǎn)品，有可能需要給用戶配置字體。

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

學(xué)習(xí)本文前，你必須有一點(diǎn) Fabric.js 的基礎(chǔ)，如果沒(méi)了解過(guò) Fabric.js 可以閱讀一下 《Fabric.js 從入門(mén)到膨脹》

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

在 Fabric.js 中使用自定義字體庫(kù)時(shí)，需要用到 fontfaceobserver.js 這個(gè)工具，至于為什么稍后會(huì)說(shuō)到。

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

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

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

先看看本例效果

我使用斗魚(yú)的字體，聽(tīng)說(shuō)是可以免費(fèi)使用，希望沒(méi)騙我～

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

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

因?yàn)樽煮w是一種資源文件，引用資源文件就需要時(shí)間去加載。

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

• fontfaceobserver.js 官網(wǎng)
• fontfaceobserver.js github地址

fontfaceobserver.js 的詳細(xì)用法可以點(diǎn)擊上面的官網(wǎng)查閱。

簡(jiǎn)單的用法如下：

<style>@font-face {font-family: 自定義字體名;src: url('字體包路徑');}
</style><script>
const font = new FontFaceObserver('自定義字體名')font.load().then().catch()
</script>

load() 方法的作用是監(jiān)聽(tīng)字體加載結(jié)果，加載成功就執(zhí)行 then 的代碼，加載失敗就執(zhí)行 catch 代碼。

動(dòng)態(tài)修改字體

如果需要在項(xiàng)目運(yùn)行時(shí)動(dòng)態(tài)修改字體，需要做以下幾步：

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

本例用到斗魚(yú)和阿里的字體，我查過(guò)了，說(shuō)是免費(fèi)使用。

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

<style>/* 我把字體放到本地了，字體路徑你們需要根據(jù)自己的項(xiàng)目去修改 *//* 引入斗魚(yú)字體 */@font-face {font-family: douyu;src: url('../../fonts/douyu.ttf');}/* 引入阿里字體 */@font-face {font-family: ali;src: url('../../fonts/AlibabaPuHuiTi-2-35-Thin.ttf');}
</style><!-- 設(shè)置字體的按鈕 -->
<button οnclick="setFont('douyu')">斗魚(yú)</button>
<button οnclick="setFont('ali')">阿里</button><!-- 畫(huà)布元素 -->
<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)建畫(huà)布const canvas = new fabric.Canvas('c')// 創(chuàng)建文本const iText = new fabric.IText('雷猴')// 將文本添加到畫(huà)布中canvas.add(iText)// 設(shè)置字體function setFont(font) {// 監(jiān)聽(tīng)當(dāng)前要設(shè)置的字體加載情況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>

精簡(jiǎn)字體庫(kù)

關(guān)于 Fabric.js 如何使用自定義字體庫(kù)的內(nèi)容說(shuō)完了，但日常工作中我還遇到一個(gè)問(wèn)題：某些特定地方會(huì)使用一些特殊字體，比如數(shù)字、項(xiàng)目名等地方。

通常字體庫(kù)會(huì)包含大量字體，但實(shí)際項(xiàng)目中可能只有幾個(gè)字會(huì)用到特殊字體。

經(jīng)過(guò)我長(zhǎng)時(shí)間的審問(wèn)，一位不愿透露姓名的網(wǎng)友終于透露出他用到精簡(jiǎn)字體庫(kù)的工具

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

客戶端也提供了mac和windows兩個(gè)版本，操作起來(lái)非常簡(jiǎn)單。有需要的工友可以打開(kāi)鏈接獲取。

• Fontmin官網(wǎng)
• Fontmin github地址

代碼倉(cāng)庫(kù)

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

? Fabric.js 使用自定義字體

推薦閱讀

👍《Fabric.js 從入門(mén)到_ _ _ _ _ _》

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

👍《Fabric.js 自定義控件》

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

👍《Fabric.js 拖拽頂點(diǎn)修改多邊形形狀》

👍《Fabric.js 復(fù)制粘貼元素》

點(diǎn)贊 + 關(guān)注 + 收藏 = 學(xué)會(huì)了 代碼倉(cāng)庫(kù)