excalidraw替换中文字体

前言

想要在 excalidraw 中使用中文字体，但是官方并没有提供中文字体，所以需要自己替换。

准备字体

从一个字体下载站点，搜索 手写体, 下载一个字体文件， 一般是 ttf 格式。

ttf 和 woff2 格式区别

web 站点，现在加载的字体主流是 woff2 格式， 他们的差异是：

  • TTF 是一种较早的字体格式，最初由苹果公司在 80 年代末开发，后来成为 TrueType 标准的一部分。TTF 字体可以用于桌面和网络，但为桌面应用最初设计。
  • WOFF2 是新一代的网络字体格式，专门为 Web 页面设计。它是 WOFF（Web Open Font Format）的升级版本，由 W3C 作为标准制定，目的是提供经过压缩的字体，以减少网络传输时所需的带宽。

再找个转换工具， 把下载的 ttf 格式文件，转换成 woff2. TTF to WOFF2 | CloudConvert

在 Chrome/Edge 中替换

在较新的 chrome 版本中， 自带了本地资源替换的功能， Override web content and HTTP response headers locally  |  DevTools  |  Chrome for Developers， 如果版本较低的， 可以使用 Resource Override 插件。

下面以 Chrome 自带的 Override Content 功能作为示例：

  • 打开 Excalidraw 站点
  • 打开开发者工具， 选择 Network 面板
  • 找到 Virgil.woff2 资源， 右击选择 Override Content.
  • 按照提示选择一个本地目录
  • 修改目录中对应的文件， 把转换过的字体文件，重命名为 Virgil.woff2
  • cmd/ctrl + Shift + R 刷新页面， 看到效果
  • 最后注意！这种方案，需要打开开发者工具才生效。

效果

效果

技术总结

  • 选择最方便替换资源的方式
  • 可以不转换字体格式， 直接使用 ttf 格式重命名后缀，但文件体积会大 （本地映射无所谓）
  • 需要保持打开开发者工具面板， 才能生效