使用git
git clone https://github.com/excalidraw/excalidraw
想要免去一堆繁琐的操作,直接找到字体文件替换为中文手写字体文件即可
字体文件在public目录下,名称为Virgil.woff2
推荐免费可商用的中文手写字体
沐瑶手写体
注意字体一定要查看是否可以免费商用,小心被告侵字体侵权
linux文件替换
此处将muyao.ttf替换为Virgil.woff2文件,使用mv命令
注意此处的ttf和woff2文件格式,尽量找同文件类型的如woff2
本文未使用ttf覆盖,仅供参考
mv muyao.ttf Virgil.woff2
编译项目
注意,想要使字体生效,仅仅替换字体是不够的,需要重新编译
按照官网以下命令即可
docker-compose up --build -d
除了上述直接覆盖字体方法外,还可以通过修改代码的方式设置自定义字体
修改 public/fonts.css
添加以下代码
@font-face {
font-family: "muyao";
src: url("muyao.ttf");
font-display: swap;
}
修改 public/index.html
在head标签中添加
<link
rel="preload"
href="muyao.ttf"
as="font"
type="font/ttf"
crossorigin="anonymous"
/>
修改 src/constants.ts
原代码
export const FONT_FAMILY = {
Virgil: 1,
Helvetica: 2,
Cascadia: 3,
};
此处为修改
export const FONT_FAMILY = {
muyao:1,
Virgil: 4,
Helvetica: 2,
Cascadia: 3,
};
修改 src/actions/actionProperties.tsx
原代码
{
value: FONT_FAMILY.Virgil,
text: t("labels.handDrawn"),
icon: <FontFamilyHandDrawnIcon theme={appState.theme} />,
}
修改为
{
value: FONT_FAMILY.muyao,
text: t("labels.handDrawn"),
icon: <FontFamilyHandDrawnIcon theme={appState.theme} />,
}
重新构建项目
要想使字体生效,仍要重新构建项目
docker-compose up --build -d
构建后访问
可以看到字体已被加载并且生效了
至此,可以使用中文手写白板