Excalidraw字体选择建议：保持手绘风格一致性

Excalidraw字体选择建议：保持手绘风格一致性

在远程协作日益频繁的今天，可视化工具早已不再是简单的“画图软件”，而是团队沟通、产品设计与系统架构表达的核心媒介。Excalidraw 正是在这一背景下脱颖而出——它不像传统流程图工具那样规整冷峻，反而以一种看似随意却极具亲和力的“手绘风格”赢得了开发者、产品经理和设计师的青睐。

但当你用 AI 一键生成一张微服务架构图时，是否曾注意到：那些自动生成的文字，虽然内容精准，却显得过于“工整”？它们像穿着正装闯入野餐会的人，与周围歪歪扭扭的线条格格不入。问题出在哪？不是线条，而是字体。

是的，在 Excalidraw 中，真正决定“像不像你亲手画的”那个细节，往往就是文本所使用的字体。哪怕其他元素都经过 rough.js 的扰动处理，若字体本身缺乏手写气质，整体风格仍会断裂。这不只是视觉上的瑕疵，更可能影响信息接收者的心理预期：一个看起来机械化的图表，容易被当作临时草稿忽略；而一个连文字都“抖”得恰到好处的图，则更容易引发共鸣与讨论。

所以，我们不妨深入一点：Excalidraw 到底是怎么把文字“画”出来的？为什么有些字体一上场就自带“白板感”，而另一些即使加了抖动也还是透着股打印味儿？

手绘感从何而来？不只是字体的事

很多人误以为，只要选个叫“Handwriting”的字体就能搞定一切。其实不然。Excalidraw 并没有依赖真实的手写字体文件来实现手绘效果，它的核心秘密在于渲染机制。

底层基于rough.js这个轻量级绘图库，Excalidraw 将所有图形（包括文字）转化为路径（path），然后对这些路径施加算法扰动——比如轻微弯曲笔画、制造断点、模拟墨水浓淡变化等。这种做法本质上是一种“视觉欺骗”：它不改变字体的本质结构，但在呈现层让它看起来像是用马克笔随手写的。

举个例子：

import * as rough from 'roughjs/bundled/rough.es5.umd'; const canvas = document.getElementById('canvas'); const rc = rough.canvas(canvas); rc.drawText('Hello Excalidraw', 10, 50, { font: '16px Inter', roughness: 2, stroke: '#000', fillStyle: 'hachure' });

这段代码展示了底层逻辑：font指定基础字形，roughness控制“手抖程度”。也就是说，最终效果 = 基础字体 + 算法扰动。这就解释了为什么即使用了非常正式的 Inter 字体，也能呈现出一定的手绘质感——因为 rough.js 已经把它“揉皱了”。

但这也带来一个关键问题：不同字体的起点不同。有的天生适合被“揉”，有的则越揉越怪。

字体选型：谁更适合站在白板前？

Excalidraw 提供了几种主要字体选项，每种都有其适用场景。我们可以从实际体验出发，看看它们各自的“演技”如何。

Inter：理性与感性的平衡者

作为默认字体，Inter 的优势在于清晰、现代、高度可读。它是为界面设计而生的无衬线字体，支持多语言（包括中文扩展），在技术文档中表现极佳。经过 rough.js 处理后，它的规整边缘会被适度打乱，但仍保留足够的辨识度。

适合场景：标注说明、技术架构图中的标签、需要长期维护的文档。

但它的问题也很明显——太“干净”了。如果你追求的是那种“刚开完会顺手拍下来的草图”感觉，Inter 可能会让你的作品显得过于克制。

Comic Sans MS：争议中的王者

没错，就是那个被无数设计指南拉黑的字体。但在 Excalidraw 的语境下，它反而成了最贴近“手写白板”的存在。它的字母结构松散、笔画粗细不均、带有儿童涂鸦般的天真感，正好契合人们对“非正式草图”的心理预期。

问题是：它不是跨平台内置的。Windows 用户有，macOS 和 Linux 用户大多没有。一旦缺失，就会回退到 Inter，导致团队协作时出现“同一张图，两种风格”的尴尬。

建议用法：仅在个人创作或明确要求统一环境的团队中使用。否则，宁愿放弃这个“完美手感”，也要确保一致性。

Handwriting (Scrawl)：专为手绘而生

这是 Excalidraw 内建的一种开源手写风格字体，名为 Scrawl。它模仿粉笔或粗头记号笔书写的效果，笔画起落自然，连笔流畅，且完全嵌入应用资源中，无需额外加载。

更重要的是，它在各种设备上都能稳定显示，避免了 Comic Sans 的兼容性陷阱。对于希望作品“一眼看去就是手绘”的用户来说，Scrawl 是目前最优解。

唯一的小缺点是：部分字符在小字号下略显模糊，建议用于标题或大段注释，而非密集的技术术语。

System Font：隐形守护者

当你选择“System Font”时，Excalidraw 会调用操作系统默认 UI 字体（如 San Francisco、Segoe UI）。这类字体优化了屏幕显示性能，加载快、清晰度高，适合快速记录想法。

但由于其高度工程化的外观，即便经过扰动处理，仍难以摆脱“数字化”印象。更适合用于内部笔记或过渡性草图，不适合对外展示。

Cascadia Code：程序员的专属笔迹

当你的图表里出现了代码片段、终端命令或 JSON 结构时，Cascadia Code 就派上了用场。这款由微软推出的开源等宽字体，专为编程场景设计，字符间距均匀，易区分l、1、I等相似符号。

虽然它本身不具备手写特征，但在技术架构图中插入代码块时，使用等宽字体本身就是一种专业信号。配合 moderate 的 roughness 设置（约 1.5~2），可以做到“既准确又不失风格”。

团队协作中的现实挑战

再好的字体策略，也抵不过一次意外的字体回退。

想象这样一个场景：你在 Windows 上用 Comic Sans 写了一段注释，分享链接给同事。他打开一看，发现文字变成了 Inter —— 不是因为设置错了，而是因为他没装这个字体。浏览器只能按 CSS 回退链执行降级，结果整个画面的风格瞬间割裂。

这就是为什么我们必须把字体管理当作一项工程实践来看待，而不只是个人审美选择。

解决方案有几个层级：

• 规范先行：在团队文档中明确规定“推荐使用 Scrawl 或 Inter”，禁止依赖系统独占字体；
• 模板固化：创建几个标准模板（如“技术评审模板”、“用户旅程地图”），预设字体、颜色、线条样式，新人直接套用；
• 私有实例部署：企业用户可通过自托管 Excalidraw 实例，预加载所需 Web 字体（如通过@font-face注入 Comic Sans 的合法版本），实现全局一致；
• AI 输出继承上下文：如果使用 AI 生成功能（natural language to diagram），务必确保其输出对象继承当前画布的activeFontFamily设置，而不是硬编码为默认值。

设计之外的考量：可访问性、国际化与导出

可访问性不能妥协

手绘风格虽好，但不能以牺牲可读性为代价。特别是对于色觉障碍用户或视力不佳者，过度扰动的字体+低对比度配色可能导致信息丢失。

最佳实践：
- 避免将roughness调至 3 以上；
- 使用深灰（#333）代替纯黑（#000）减少视觉压迫；
- 关键信息尽量使用 Inter 或 System Font，降低识别难度。

中文支持怎么办？

Inter 对 CJK 字符的支持相当不错，包含完整的简繁汉字集。相比之下，Comic Sans 在中文环境下几乎不可用——多数版本只包含拉丁字母。Scrawl 目前也不支持中文。

因此，涉及中英文混排时，建议优先选用 Inter，并接受其相对正式的风格。未来或许可通过引入支持中文的手写风 Web 字体（如“得意黑”、“仓耳今楷”）进行扩展，但这需要前端层面的定制开发。

导出时字体去哪儿了？

当你将画布导出为 PNG 或 SVG 时，文本通常会被转为路径（path）或保留为<text>元素并附带font-family属性。如果是后者，且依赖外部字体，则在他人设备上打开时可能出现替换风险。

保险做法：
- 导出前确认关键文本已“栅格化”或转为路径；
- 若需保留编辑能力，应随文档附上字体安装指引或使用通用字体。

让每一行字都像你写的

Excalidraw 的魅力，从来不在功能有多强大，而在于它让人重新找回“动手画图”的乐趣。而这份乐趣的关键，在于一致性——无论是你自己画的，还是 AI 帮你生成的；是你在 Windows 上做的，还是队友在 Mac 上改的，都应该看起来“出自同一双手”。

要做到这一点，就不能把字体当成一个无关紧要的下拉菜单选项。它是风格的锚点，是人机协同的接口，更是团队协作的语言共识。

下次当你准备输入第一行文字时，不妨停下来问一句：
“我想让这张图看起来是谁写的？”

如果是你，那就选 Scrawl；
如果是某个严谨的系统文档机器人，那就用 Inter；
如果是一场轻松的头脑风暴，也许可以试试 Comic Sans —— 只要你们都装了。

最终目标不是追求某种“正确”的字体，而是让每一个像素都在讲述同一个故事：这是我们共同完成的一幅草图，潦草，但真诚。