1 - Excalidraw介紹
Excalidraw是一個(gè)開(kāi)源、小巧易用的手寫(xiě)風(fēng)格的框圖畫(huà)板軟件。
?excalidraw官網(wǎng)地址：https://excalidraw.com/?
2 - Excalidraw本地化安裝（git方式）
2-1安裝部署
在terminal中，輸入：
git clone https://github.com/excalidraw/excalidraw.git
安裝完成后，在terminal中，進(jìn)入項(xiàng)目文件
cd excalidraw/
2-2 安裝依賴(lài)環(huán)境 - nodeJS
NodeJS下載地址：
nodejs下載：http://nodejs.cn/download
下載pkg包，一直下一步，直到完成。
驗(yàn)證nodeJS是否安裝成功（terminal上）
which node
輸出：表示安裝成功
/usr/local/bin/node
2-3 安裝依賴(lài)環(huán)境 - brew
執(zhí)行命令安裝brew，將官網(wǎng)中命令，在terminal中輸入，即：
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
2-4 安裝依賴(lài)環(huán)境 - yarn
brew install yarn
在此目錄下（cd excalidraw/），運(yùn)行yarn
3 - 啟動(dòng)Excalidraw
cd excalidraw/
yarn start
3-1 修改字體
直接下載字體后，改名為：Virgil.woff2，直接覆蓋掉即可。
3-2 下載woff2字體
先下載免費(fèi)ttf字體
ttf免費(fèi)字體下載地址：https://www.fonts.net.cn/commercial-free/fonts-zh-1.html
再將ttf字體轉(zhuǎn)換成woff2字體
ttf字體轉(zhuǎn)woff2字體：https://www.toolnb.com/tools/fonttowoff2.html
3-3 Excalidraw更換手寫(xiě)字體
3-3-1｜拷貝字體至文件夾
打開(kāi)目錄pubic，將woff2字體放在此目錄下，并命名成：MyFonts.woff2
3-3-2｜修改public/fonts.css
在public/fonts.css，增加以下代碼（直接復(fù)制進(jìn)去）
@font-face {
font-family: "MyFonts";
src: url("MyFonts.woff2");
font-display: swap;
}
3-3-3｜修改public/index.html
修改 public/index.html，在head 標(biāo)簽中增加如下代碼：
<link
rel="preload"
href="MyFonts.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
3-3-4｜修改 src/constants.ts
修改 src/constants.ts，增加字體變量，此處以 MyFonts 字體代替了 Virgil 字體：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-627248.html
export const FONT_FAMILY = {
Virgil: 1,
Helvetica: 2,
Cascadia: 3,
};
// 變更為
export const FONT_FAMILY = {
MyFonts: 1,
Virgil: 4,
Helvetica: 2,
Cascadia: 3,
};
3-3-5｜修改 src/actions/actionProperties.tsx
修改 src/actions/actionProperties.tsx，替換字體的使用：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-627248.html
{
value: FONT_FAMILY.Virgil,
text: t("labels.handDrawn"),
icon: <FontFamilyHandDrawnIcon theme={appState.theme} />,
}
// 變更為
{
value: FONT_FAMILY.MyFonts,
text: t("labels.handDrawn"),
icon: <FontFamilyHandDrawnIcon theme={appState.theme} />,
}
3-3-6｜重啟服務(wù)器
到了這里，關(guān)于Excalidraw本地化部署的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
