Excalidraw 字体修改

Excalidraw 是我非常喜欢的一款开源手绘风格白板工具，可以用来画流程图、设计图等。我在使用时发现它的手写风格字体只支持英文，中文会变成默认字体，不太美观，于是动了修改字体的心思。

Excalidraw 的Docker容器版本和静态搭建的版本我都试过，也都修改成功了，所以下面分两种方法介绍。

提醒！记得看Q&A部分，Excalidraw新版本更改了字体文件的路径，需要特别注意一下！

提取静态文件

首先，从 docker 容器内提取出 public 目录下的静态文件。重新创建容器，将提取出的静态文件目录进行挂载，替换镜像的文件。

1
$ docker cp xxxxx:/usr/share/nginx/html ./

Virgil 对应手写字体，Cascadia 对应代码字体，Helvetica 对应普通字体。

我保留了原始字体文件，把准备替换的字体复制到目录下，修改 font.css 使其指向我的字体：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 支持 woff woff2 ttf 等字体格式 */

/* http://www.eaglefonts.com/fg-virgil-ttf-131249.htm */
/* Modified By FrozenSky */
@font-face {
  font-family: "Virgil";
  src: url("font_QMYB.ttf");
  font-display: swap;
}

/* https://github.com/microsoft/cascadia-code */
/* Modified By FrozenSky */
@font-face {
  font-family: "Cascadia";
  src: url("font_NotoSans.woff2");
  font-display: swap;
}

/* Added By FrozenSky */
@font-face {
  font-family: "Helvetica";
  src: url("font_LXGW.woff2");
  font-display: swap;
}

修改 index.html 文件，搜索 “preload”，修改其中的路径，使其指向新字体：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<link
  rel="preload"
  href="/font_QMYB.ttf"
  as="font"
  type="font/ttf"
  crossorigin="anonymous"
/>
<link
  rel="preload"
  href="/font_NotoSans.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous"
/>
<link
  rel="preload"
  href="/font_LXGW.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous"
/>

构建静态文件

如果不方便从容器中提取静态文件，也可以去 Excalidraw 的 Github 仓库下载源码，进行修改后再构建出静态文件。这需要 Node 环境和一大堆依赖库，比较繁琐，如果不是进行二次开发还是考虑用 Docker 容器提取的方法吧。

下载源码

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

安装依赖

1
yarn install

运行

1
yarn start

如果一切正常，本地服务启动后会自动打开浏览器进行预览。此时对源代码的修改会实时生效。

修改

Excalidraw 源码仓库中字体文件在 excalidraw\public\fonts 目录，网页前端在 excalidraw\excalidraw-app\ 目录，按照上文进行修改即可。

构建

1
yarn build

构建生成的静态文件在 excalidraw\excalidraw-app\build\

部署时可以删除生成的 .map 文件

Q&A

Q: 载入网页时字体仍然是原始字体，重新编辑文字后才能显示修改后的字体，并且只要刷新网页，字体就又会变回原始字体。

A: Excalidraw 新版本将字体和 fonts.css 整合到 /fonts 目录下了，所以网页对字体的引用路径变为 /fonts/font_QMYB.ttf。这对 fonts.css 文件的修改没有影响，因为它使用相对路径。但对 index.html 来说，则需要把所有字体的引用路径从 /font_QMYB.ttf 修改为 /fonts/font_QMYB.ttf。这段代码用来预加载字体，如果没有正常加载到字体或者加载了错误的字体都会导致字体显示异常。

Q: 部署在域名的子目录出现无法访问的情况（如在 Gitee Pages 进行部署）

A: 因为在 Gitee Pages 部署静态网站的默认路径是仓库名称的子目录，比如仓库名称是 exdraw 则 Gitee Pages 的网站地址是 https://user.gitee.io/exdraw。而 Excalidraw 的资源路径都是以根目录为基础的，所以无法找到相关资源，导致无法访问，出现空白页面。

要部署到子目录，需要修改 excalidraw\excalidraw-app\vite.config.mts 配置文件：

1
2
3
4
5
6
7
export default defineConfig({
  base: '/exdraw', // 添加 base 变量，设置为对应的部署子目录
  server: {
    port: Number(envVars.VITE_APP_PORT || 3000),
    // open the browser
    open: true,
  },

Reference

https://segmentfault.com/a/1190000040701795

https://juejin.cn/post/7234703748403068988