Excalidraw修改手写中文字体~沐瑶手写体

Posted on by dsx_2016
NO.1
下载项目

使用git

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

NO.2
字体覆盖

想要免去一堆繁琐的操作，直接找到字体文件替换为中文手写字体文件即可

字体文件在public目录下，名称为Virgil.woff2

img

推荐免费可商用的中文手写字体

沐瑶手写体

注意字体一定要查看是否可以免费商用，小心被告侵字体侵权

img

linux文件替换

此处将muyao.ttf替换为Virgil.woff2文件，使用mv命令

注意此处的ttf和woff2文件格式，尽量找同文件类型的如woff2

本文未使用ttf覆盖，仅供参考

mv muyao.ttf Virgil.woff2

编译项目

注意，想要使字体生效，仅仅替换字体是不够的，需要重新编译

按照官网以下命令即可

docker-compose up --build -d
NO.3
字体设置

除了上述直接覆盖字体方法外，还可以通过修改代码的方式设置自定义字体

修改 public/fonts.css

添加以下代码

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

img

修改 public/index.html

在head标签中添加

<link
​
      rel="preload"
​
      href="muyao.ttf"
​
      as="font"
​
      type="font/ttf"
​
      crossorigin="anonymous"
​
      />

img

修改 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,
​
};

img

修改 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} />,
​
}

img

重新构建项目

要想使字体生效，仍要重新构建项目

docker-compose up --build -d

构建后访问

可以看到字体已被加载并且生效了

img

至此，可以使用中文手写白板

END