本文簡介
點(diǎn)贊 + 關(guān)注 + 收藏 = 學(xué)會(huì)了
如果你使用 Fabric.js 做編輯類的產(chǎn)品，有可能需要給用戶配置字體。
這次就講講在 Fabric.js 中創(chuàng)建文本時(shí)怎么使用自定義字體、在項(xiàng)目運(yùn)行時(shí)怎么修改字體、以及推薦一個(gè)精簡字體庫的工具。
學(xué)習(xí)本文前，你必須有一點(diǎn) Fabric.js 的基礎(chǔ)，如果沒了解過 Fabric.js 可以閱讀一下 《Fabric.js 從入門到膨脹》
創(chuàng)建文本時(shí)設(shè)置字體
在 Fabric.js 中使用自定義字體庫時(shí)，需要用到 fontfaceobserver.js 這個(gè)工具，至于為什么稍后會(huì)說到。
在創(chuàng)建文本時(shí)就設(shè)置字體，需要做以下幾步：
- 在
CSS里引入字體。 - 使用
Fabric.js創(chuàng)建畫布。 - 等字體加載完成后再設(shè)置文本字體。
- 將文本添加到畫布中。
在本例中，我使用 IText 創(chuàng)建文本，在創(chuàng)建時(shí)通過它的 fontFamily 屬性就可以設(shè)置自定義字體。
先看看本例效果
我使用斗魚的字體，聽說是可以免費(fèi)使用，希望沒騙我～
按照前面說到的步驟去實(shí)現(xiàn)：
<style>
/* 引入斗魚字體 */
/* 我把字體放到本地了，字體路徑你們需要根據(jù)自己的項(xiàng)目去修改 */
@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í)行設(shè)置字體的
douyuFont.load()
// 加載成功
.then(() => {
// 創(chuàng)建文本
const iText = new fabric.IText('雷猴', {
fontFamily: 'douyu' // 設(shè)置字體
})
// 將文本添加到畫布中
canvas.add(iText)
})
// 加載失敗
.catch(() => {
console.error('字體加載失敗')
})
</script>
因?yàn)樽煮w是一種資源文件，引用資源文件就需要時(shí)間去加載。
創(chuàng)建畫布渲染文本的速度可能會(huì)比加載字體資源快很多，所以需要用到 fontfaceobserver.js 去監(jiān)聽字體加載結(jié)果。
fontfaceobserver.js官網(wǎng)fontfaceobserver.jsgithub地址
fontfaceobserver.js 的詳細(xì)用法可以點(diǎn)擊上面的官網(wǎng)查閱。
簡單的用法如下：
<style>
@font-face {
font-family: 自定義字體名;
src: url('字體包路徑');
}
</style>
<script>
const font = new FontFaceObserver('自定義字體名')
font.load()
.then()
.catch()
</script>
load() 方法的作用是監(jiān)聽字體加載結(jié)果，加載成功就執(zhí)行 then 的代碼，加載失敗就執(zhí)行 catch 代碼。
動(dòng)態(tài)修改字體
如果需要在項(xiàng)目運(yùn)行時(shí)動(dòng)態(tài)修改字體，需要做以下幾步：
- 提前加載好要用的字體庫。
- 創(chuàng)建畫布。
- 等字體加載完成后再設(shè)置文本字體。
- 將文本添加到畫布中。
- 修改字體前，先獲取要修改的文本元素。
- 使用
set方法設(shè)置文本的fontFamily屬性。 - 刷新畫布。
本例用到斗魚和阿里的字體，我查過了，說是免費(fèi)使用。
根據(jù)上面提到的幾步動(dòng)手編碼
<style>
/* 我把字體放到本地了，字體路徑你們需要根據(jù)自己的項(xiàng)目去修改 */
/* 引入斗魚字體 */
@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 onclick="setFont('douyu')">斗魚</button>
<button onclick="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)
// 設(shè)置字體
function setFont(font) {
// 監(jiān)聽當(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>
精簡字體庫
關(guān)于 Fabric.js 如何使用自定義字體庫的內(nèi)容說完了，但日常工作中我還遇到一個(gè)問題：某些特定地方會(huì)使用一些特殊字體，比如數(shù)字、項(xiàng)目名等地方。
通常字體庫會(huì)包含大量字體，但實(shí)際項(xiàng)目中可能只有幾個(gè)字會(huì)用到特殊字體。
經(jīng)過我長時(shí)間的審問，一位不愿透露姓名的網(wǎng)友終于透露出他用到精簡字體庫的工具
Fontmin 有客戶端，也可以直接使用終端操作。
客戶端也提供了mac和windows兩個(gè)版本，操作起來非常簡單。有需要的工友可以打開鏈接獲取。
- Fontmin官網(wǎng)
- Fontmin github地址
代碼倉庫
本文完整代碼可通過下方鏈接獲取。
? Fabric.js 使用自定義字體
推薦閱讀
??《Fabric.js 從入門到_ _ _ _ _ _》
??《Fabric.js 樣式不更新怎么辦？》
??《Fabric.js 自定義控件》
??《Fabric.js 講解官方demo：Stickman》
??《Fabric.js 拖拽頂點(diǎn)修改多邊形形狀》
??《Fabric.js 復(fù)制粘貼元素》文章來源：http://www.zghlxwxcb.cn/news/detail-711423.html
點(diǎn)贊 + 關(guān)注 + 收藏 = 學(xué)會(huì)了
代碼倉庫文章來源地址http://www.zghlxwxcb.cn/news/detail-711423.html
到了這里，關(guān)于Fabric.js 使用自定義字體的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
