关于前端:Excalidraw-修改手写中文字体

63次阅读

共计 855 个字符，预计需要花费 3 分钟才能阅读完成。

1、依照官网进行下载 git clone

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

2、关上动态资源目录 public，将筹备好的字体包放到当前目录下，示例中字体文件名：MyFonts.woff2

3、批改 public/fonts.css，减少如下代码：

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

4、批改 public/index.html，在 head 标签中减少如下代码：

    <link
      rel="preload"
      href="MyFonts.woff2"
      as="font"
      type="font/woff2"
      crossorigin="anonymous"
    />

5、批改 src/constants.ts，减少字体变量，此处以 MyFonts 字体代替了 Virgil 字体：

export const FONT_FAMILY = {
  Virgil: 1,
  Helvetica: 2,
  Cascadia: 3,
};
// 变更为
export const FONT_FAMILY = {
  MyFonts: 1,
  Virgil: 4,
  Helvetica: 2,
  Cascadia: 3,
};

6、批改 src/actions/actionProperties.tsx，替换字体的应用：

{
    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} />,
}

7、启动服务器查看即可~

除了以上办法外，暴力办法：间接笼罩 public/Virgil.woff2 文件即可。

正文完