我一直在开发一款屏幕录制工具，我非常看重的一个功能是 **Stickers（贴纸）** —— 你可以叠加在视频上的小形状、线条和文字，用以强调、批注或突出显示某些内容。

起初，我的实现非常“标准”：

- 完美的矢量形状
- 从 Google Fonts 中挑选的几种字体

结果看起来……还行。但也显得刻板、无趣，非常有“工具感”。形状感觉太几何化了，而且没有一种字体具有那种温暖、自然、“手绘”的感觉。

我脑子里一直在想：

> _“如果我能做出像 Excalidraw 那样的风格，那就完美了。”_

于是我向 AI 寻求帮助，研究 Excalidraw 是如何实现那种外观的。

* * *

### 第 1 步：寻找字体 —— Virgil → Excalifont

AI 首先向我推荐了 **Virgil**，这是 Excalidraw 使用的那种看起来像手写的字体。

当我谷歌搜索它时，我发现 Virgil 实际上是旧版本，而新版本叫做 **Excalifont**：
[https://plus.excalidraw.com/excalifont](https://plus.excalidraw.com/excalifont)

查看了授权：基于 MIT，无使用限制，允许商业用途。完美。🙌 对 Excalidraw 团队开源这一成果表示诚挚的敬意。

* * *

### 第 2 步：手绘线条和形状 —— roughjs

AI 发现的第二个关键要素是 **roughjs**，Excalidraw 正是使用它来渲染手绘风格的形状和线条。

仓库： [https://github.com/rough-stuff/rough](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](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 那种俏皮、素描的风格。

screentell stickers demo - YouTube

Tap to unmute

[screentell stickers demo](https://www.youtube.com/watch?v=B1P0iVICOZM) [Shawn Hacks](https://www.youtube.com/channel/UChyc_lDyR5Sv20-dmVAXHww)

Shawn Hacks2 subscribers

* * *

如果你正在开发任何涉及批注、图表或 UI 叠加的内容，我强烈推荐这个组合：

- **Excalifont** 用于手写外观
- **roughjs** 用于草图风格的线条和形状

我也很好奇：
**这里有人进一步尝试过重现类似 Excalidraw 的交互或样式吗？**
很想看看例子或听听你们的方法。

最后更新：2025年12月8日