快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

【踩坑日记·前端】为Excalidraw添加中文手写字体-创新互联

文章目录
    • 前言
    • 中文手写字体
    • 步骤
      • 1. 下载源代码和中文字体
      • 2. 注册字体
      • 3. 预加载字体资源
      • 4. 增加字体枚举
      • 5. 添加字体切换按钮
    • 部署测试
    • 参考资料

创新互联公司于2013年成立,公司以成都做网站、成都网站制作、系统开发、网络推广、文化传媒、企业宣传、平面广告设计等为主要业务,适用行业近百种。服务企业客户上千余家,涉及国内多个省份客户。拥有多年网站建设开发经验。为企业提供专业的网站建设、创意设计、宣传推广等服务。 通过专业的设计、独特的风格,为不同客户提供各种风格的特色服务。前言

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

在这里插入图片描述
请添加图片描述

但美中不足的是,Excalidraw 只支持英文手写字体,好在 Excalidraw 是开源软件,我们可以通过修改代码为其添加中文手写字体。

中文手写字体

在这里向大家推荐几款好看的中文手写字体,我个人比较喜欢沐瑶软笔手写体,下面就以这款字体为例,演示如何为 Excalidraw 添加中文手写字体。

  • 字语青梅硬笔(商用需付费)

    • (
  • 沐瑶软笔手写体(免费商用)

    • 在这里插入图片描述
  • 沐瑶随心手写体(免费商用)

    • 在这里插入图片描述
步骤 1. 下载源代码和中文字体

下载 Excalidraw 源代码 到本地并解压,或者直接使用 Git 克隆项目:

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

下载中文手写体,并将其复制到public目录下:

在这里插入图片描述

注意:字体名不能含有中文或其他特殊符号,建议将字体名重命名为纯英文。在这里我选择的字体是沐瑶软笔手写体,并重命名为Muyao.ttf,后续代码中的字体名一定要保持一致。

2. 注册字体

编辑public/font.css,添加文手写体:

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

添加完成后代码如下:

在这里插入图片描述

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

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

添加完成后代码如下:

在这里插入图片描述

3. 预加载字体资源

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

添加完成后代码如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TE4l615i-1668768518048)(_imgs/image-20221118182429809.png)]

4. 增加字体枚举

编辑public/constant.ts,在FONT_FAMILY常量中加入字体的枚举:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-44WjGvMC-1668768518049)(_imgs/image-20221118182649625.png)]

5. 添加字体切换按钮

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

{value: FONT_FAMILY.Muyao,
    text: t("labels.handDrawn"),
    icon: FreedrawIcon,
}

添加完成后代码如下:

在这里插入图片描述

部署测试

进入 excalidraw 源代码目录,在终端中执行下列代码:

# 安装依赖包
yarn

# 启动应用
yarn start

在这里插入图片描述

出现上面的输出代表应用启动成功,用浏览器访问http://localhost:3000

在这里插入图片描述

在左侧的面板中可以看到刚才添加的手写字体,选择即可切换。

参考资料

[1] Excalidraw - 免费的手绘风格白板应用 - 知乎

[2] 送给大家的免费字体:沐瑶软笔手写体_春颜秋色-站酷ZCOOL

[3] 送给大家的字体2:沐瑶随心手写体_春颜秋色-站酷ZCOOL

[4] 字语青梅硬笔字体免费下载和在线预览-字体天下

[5] GitHub - excalidraw/excalidraw: Virtual whiteboard for sketching hand-drawn like diagrams

你是否还在寻找稳定的海外服务器提供商?创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源,准确流量调度确保服务器高可用性,企业级服务器适合批量采购,新人活动首月15元起,快前往官网查看详情吧


分享名称:【踩坑日记·前端】为Excalidraw添加中文手写字体-创新互联
网页链接:http://6mz.cn/article/dpcjso.html

其他资讯