私有化部署Excalidraw并添加中文字体

简介

Excalidraw 是一款完全免费的手绘风格绘图在线应用，能快速画出漂亮的流程图、示意图和图表，地址： Excalidraw | Hand-drawn look & feel • Collaborative • Secure

但是在线Excalidraw 只支持英文手写字体不支持中文字体，好在 Excalidraw 是开源软件通过浏览器代理方式修改字体方式未实现，好在 Excalidraw 是开源软件，所以可以通过私有化部署修改本地字体文件添加中文字体。

1. 首先准备好中文手写字体文件

推荐 免费商用字体下载网站

2. clone Excalidraw 源代码

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

安装依赖 yarn

yarn

运行项目

yarn start

3.将中文手写字体复制到public目录下：

字体名称不能带有中文或特殊符号

4.注册字体

编辑public/font.css 添加如下代码

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

编辑 src/index-node.ts，添加下列代码注册中文手写字体

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

5. 预加载字体资源

编辑 public/index.html，在其中加入字体预加载代码，可以提高应用启动时的速度

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

6. 添加字体切换按钮

编辑 src/constant.ts，在 FONT_FAMILY 常量中加入字体的枚举：

7. 修改字体枚举

最后，编辑 /src/actions/actionProperties.tsx，在 PanelComponent 的返回值数组中加入下列元素：

{
        value: FONT_FAMILY.xdxc,
        text: t("labels.code"),
        icon: StrokeWidthBaseIcon,
      },

8. 本地启动测试

yarn start

浏览器自动弹出 http://localhost:3000/ 输入中文字体即可测试

最后 yarn build 把打包后到文件发布部署到服务器上 类似部署到uniCloud 云服务器上进行测试，可进行试用 www.excalidraw.top/#/

www.excalidraw.top/#/