【踩坑日记 · 前端】为 Excalidraw 添加中文手写字体
文章目录
- 前言
- 中文手写字体
- 步骤
- 1. 下载源代码和中文字体
- 2. 注册字体
- 3. 预加载字体资源
- 4. 增加字体枚举
- 5. 添加字体切换按钮
- 部署测试
- 参考资料
前言
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
,在其中加入字体预加载代码,可以提高应用启动时的速度:
<linkrel="preload"href="Muyao.ttf"as="font"type="font/ttf"crossorigin="anonymous"/>
添加完成后代码如下:
4. 增加字体枚举
编辑 src/constant.ts
,在 FONT_FAMILY
常量中加入字体的枚举:
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
【踩坑日记 · 前端】为 Excalidraw 添加中文手写字体相关推荐
- 【转载】Windows下Tesseract4.0识别与中文手写字体训练
一 . tesseract 4.0 安装及使用 1. tesseract 4.0 安装 安装包下载地址: http://digi.bib.uni-mannheim.de/tesseract/tesse ...
- Windows下Tesseract4.0识别与中文手写字体训练
一 . tesseract 4.0 安装及使用 1. tesseract 4.0 安装 安装包下载地址: http://digi.bib.uni-mannheim.de/tesseract/tesse ...
- 什么相片可以两张弄成一张_手机修图教程 | 如何不着痕迹地给相片添加优雅手写字体?...
文章原创首发于头条号[影像派],版权所有,未经许可,不得转载. 请关注[影像派] 一 当看到一幅很景色优美的摄影作品,你是否想给它添加一小段抒情文字? 当拍到一些古味犹存的风景,你是否也会按捺不住诗兴 ...
- Excalidraw 安装部署中文手绘/手写字体
Excalidraw 是一个在线的白板协作工具,支持用户创建手绘风格的图形,但是默认情况下不支持中文手写字体. 如果你想在 Excalidraw 中使用中文手写字体,可以按照以下步骤进行安装和部署. ...
- 支持中文手写和多画布的Handraw
什么是 Handraw ? Handraw 是支持中文手写和多画布的 Excalidraw 白板工具. 官网上项目名称还是 Excalidraw-CN,所以 Handraw 应该是基于 Excalid ...
- Swarm-BZZ踩坑日记之 如何让METMASK小狐狸显示gbzz
刚入门bzz的新手还不知道小狐狸是什么的请移步上一章节:Swarm-BZZ踩坑日记之 如何在METMASK小狐狸导入节点地址 在浏览器安装好小狐狸,并添加自己的钱包地址后 会发现只显示ETH,并不显示 ...
- ReactNative 在丁香医生项目中引入的踩坑日记
ReactNative 在丁香医生项目中引入的踩坑日记 this没绑定到函数导致空指针 参考 React-Native 踩坑第二弹-undefined is not a function(evalua ...
- Antd Pro V4 protable详解(ps:踩坑日记)
Antd Pro V4 protable详解(ps:踩坑日记) 写在前面: 在这篇文章中,你会了解到: protable 中的cloumns属性详解 protable数据加载和处理(两种方法,直接使用 ...
- midjourney指令笔记+踩坑日记+gpt论文润色指令
跟人拼团入手了midjourney,长期记录更新. midjourney指令笔记+踩坑日记 指令笔记 踩坑日记 GPT论文润色指令 指令一 指令二 指令三 指令四 指令五 指令笔记 关键词参考网址:p ...
最新文章
- D(背)P(包)专题
- 开源自己写的Library到github,让别人或自己的项目依赖
- [hive学习翻译]Hive - Introduction
- java读取pptx到md
- 本地构建和自动化构建_如何构建最强大,最安全的家庭自动化系统
- jquery 表格自动拆分(方便打印)插件-printTable
- 怎么看服务器cpu温度命令_简单几步使用zabbix监控Linux物理服务器CPU温度
- 【五级流水线CPU】—— 7. 协处理器访问指令(2条)
- Asprise OCR v4.0 64位破解...仅供学习使用
- GameSalad是html5游戏的搅局者吗?看中国式游戏
- 达芬奇密码--buuctf密码学
- 前端开发-CSS快速掌握上手知识详细总结
- java.lang.IllegalStateException: Only fullscreen opaque activities can request orientation
- python高级教程_Python高级进阶教程
- GIS--矢量数据,栅格数据,切片,瓦片,金字塔的概念
- 函数:fopen的使用方法
- pdf文件过大,如何缩小的操作教程
- OpenCV stereo matching 代码 matlab实现视差显示
- Matlab语音信号去噪程序,使用低通巴特沃斯滤波器
- 作为一个新人,怎样学习嵌入式Linux ?(韦东山)