【踩坑日記·前端】為Excalidraw添加中文手寫字體-創(chuàng)新互聯(lián)

文章目錄

• • 前言
  • 中文手寫字體
  • 步驟
  • • 1. 下載源代碼和中文字體
    • 2. 注冊字體
    • 3. 預(yù)加載字體資源
    • 4. 增加字體枚舉
    • 5. 添加字體切換按鈕
  • 部署測試
  • 參考資料

創(chuàng)新互聯(lián)公司于2013年成立，公司以成都做網(wǎng)站、成都網(wǎng)站制作、系統(tǒng)開發(fā)、網(wǎng)絡(luò)推廣、文化傳媒、企業(yè)宣傳、平面廣告設(shè)計等為主要業(yè)務(wù)，適用行業(yè)近百種。服務(wù)企業(yè)客戶上千余家，涉及國內(nèi)多個省份客戶。擁有多年網(wǎng)站建設(shè)開發(fā)經(jīng)驗。為企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、創(chuàng)意設(shè)計、宣傳推廣等服務(wù)。 通過專業(yè)的設(shè)計、獨(dú)特的風(fēng)格，為不同客戶提供各種風(fēng)格的特色服務(wù)。前言

Excalidraw 是一款完全免費(fèi)的手繪風(fēng)格繪圖在線應(yīng)用，能快速畫出漂亮的流程圖、示意圖和圖表，地址： Excalidraw | Hand-drawn look & feel ? Collaborative ? Secure

但美中不足的是，Excalidraw 只支持英文手寫字體，好在 Excalidraw 是開源軟件，我們可以通過修改代碼為其添加中文手寫字體。

中文手寫字體

在這里向大家推薦幾款好看的中文手寫字體，我個人比較喜歡沐瑤軟筆手寫體，下面就以這款字體為例，演示如何為 Excalidraw 添加中文手寫字體。

• 字語青梅硬筆（商用需付費(fèi)）

  • 

• 沐瑤軟筆手寫體（免費(fèi)商用）

  • 

• 沐瑤隨心手寫體（免費(fèi)商用）

  • 

步驟 1. 下載源代碼和中文字體

下載 Excalidraw 源代碼 到本地并解壓，或者直接使用 Git 克隆項目：

git clone https://github.com/excalidraw/excalidraw

下載中文手寫體，并將其復(fù)制到public目錄下：

注意：字體名不能含有中文或其他特殊符號，建議將字體名重命名為純英文。在這里我選擇的字體是沐瑤軟筆手寫體，并重命名為Muyao.ttf，后續(xù)代碼中的字體名一定要保持一致。

2. 注冊字體

編輯public/font.css，添加文手寫體：

@font-face {font-family: "Muyao";
  src: url("Muyao.ttf");
  font-display: swap;
}

添加完成后代碼如下：

編輯src/index-node.ts，添加下列代碼注冊中文手寫字體：

registerFont("./public/Muyao.ttf", {family: "Muyao" });

添加完成后代碼如下：

3. 預(yù)加載字體資源

編輯public/index.html，在其中加入字體預(yù)加載代碼，可以提高應(yīng)用啟動時的速度：

添加完成后代碼如下：

4. 增加字體枚舉

編輯public/constant.ts，在FONT_FAMILY常量中加入字體的枚舉：

5. 添加字體切換按鈕

最后，編輯/src/actions/actionProperties.tsx，在PanelComponent的返回值數(shù)組中加入下列元素：

{value: FONT_FAMILY.Muyao,
    text: t("labels.handDrawn"),
    icon: FreedrawIcon,
}

添加完成后代碼如下：

部署測試

進(jìn)入 excalidraw 源代碼目錄，在終端中執(zhí)行下列代碼：

# 安裝依賴包
yarn

# 啟動應(yīng)用
yarn start

出現(xiàn)上面的輸出代表應(yīng)用啟動成功，用瀏覽器訪問http://localhost:3000：

在左側(cè)的面板中可以看到剛才添加的手寫字體，選擇即可切換。

參考資料

[1] Excalidraw - 免費(fèi)的手繪風(fēng)格白板應(yīng)用 - 知乎

[2] 送給大家的免費(fèi)字體：沐瑤軟筆手寫體_春顏秋色-站酷ZCOOL

[3] 送給大家的字體2：沐瑤隨心手寫體_春顏秋色-站酷ZCOOL

[4] 字語青梅硬筆字體免費(fèi)下載和在線預(yù)覽-字體天下

[5] GitHub - excalidraw/excalidraw: Virtual whiteboard for sketching hand-drawn like diagrams

你是否還在尋找穩(wěn)定的海外服務(wù)器提供商？創(chuàng)新互聯(lián)www.cdcxhl.cn海外機(jī)房具備T級流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確流量調(diào)度確保服務(wù)器高可用性，企業(yè)級服務(wù)器適合批量采購，新人活動首月15元起，快前往官網(wǎng)查看詳情吧

分享文章：【踩坑日記·前端】為Excalidraw添加中文手寫字體-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://www.bm7419.com/article30/dpcjso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站內(nèi)鏈、小程序開發(fā)、品牌網(wǎng)站設(shè)計、企業(yè)建站、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)