我一直在开发一款屏幕录制工具，我非常看重的一个功能是 Stickers（贴纸） —— 你可以叠加在视频上的小形状、线条和文字，用以强调、批注或突出显示某些内容。
起初，我的实现非常“标准”：
- 完美的矢量形状
- 从 Google Fonts 中挑选的几种字体
结果看起来……还行。但也显得刻板、无趣，非常有“工具感”。 形状感觉太几何化了，而且没有一种字体具有那种温暖、自然、“手绘”的感觉。
我脑子里一直在想：
“如果我能做出像 Excalidraw 那样的风格，那就完美了。”
于是我向 AI 寻求帮助，研究 Excalidraw 是如何实现那种外观的。
第 1 步：寻找字体 —— Virgil → Excalifont
AI 首先向我推荐了 Virgil，这是 Excalidraw 使用的那种看起来像手写的字体。
当我谷歌搜索它时，我发现 Virgil 实际上是旧版本，而新版本叫做 Excalifont： https://plus.excalidraw.com/excalifont
查看了授权：基于 MIT，无使用限制，允许商业用途。 完美。🙌 对 Excalidraw 团队开源这一成果表示诚挚的敬意。
第 2 步：手绘线条和形状 —— roughjs
AI 发现的第二个关键要素是 roughjs，Excalidraw 正是使用它来渲染手绘风格的形状和线条。
仓库：https://github.com/rough-stuff/rough (GitHub 上有 20k+ ⭐)
Rough.js 是一个轻量级（gzip 后 < 9kB）的图形库，它可以让你绘制具有素描、手绘风格的形状。
这正是我制作贴纸所需要的。
第 3 步：整合 —— Excalifont + roughjs
一旦我知道了这两个核心部分，实现起来就很直接了。
1) 下载并定义 Excalifont
你可以在这里获取字体： https://excalidraw.nyc3.cdn.digitaloceanspaces.com/fonts/Excalifont-Regular.woff2
然后在你的 CSS 中定义它：
@font-face {
font-family: 'Excalifont';
src: url('/fonts/Excalifont-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}现在你可以在应用中的任何地方使用它：
.sticker-text {
font-family: 'Excalifont', system-ui, sans-serif;
}2) 安装 roughjs
pnpm add roughjs
# 或者
npm install roughjs
# 或者
yarn add roughjs然后你就可以用它来绘制具有手绘感的形状（例如在 <canvas> 或 SVG 上）。
第 4 步：让 AI 处理连接部分
在我有了构建块（字体 + roughjs）之后，我让 AI 帮助我：
- 生成围绕 roughjs 的小型实用工具包装器
- 设计一致的“贴纸” API（矩形、箭头、下划线、标注等）
- 微调参数，使其看起来不那么“嘈杂”，但依然保持手绘感
现在我的屏幕录制工具拥有的贴纸，比起枯燥的默认形状，外观上更接近 Excalidraw 那种俏皮、素描的风格。
如果你正在开发任何涉及批注、图表或 UI 叠加的内容，我强烈推荐这个组合：
- Excalifont 用于手写外观
- roughjs 用于草图风格的线条和形状
我也很好奇： 这里有人进一步尝试过重现类似 Excalidraw 的交互或样式吗？ 很想看看例子或听听你们的方法。