Datatype：把柱状图、折线图和饼图全部做进一个可变字体
阅读时间: 大约 8 分钟
Datatype：把柱状图、折线图和饼图全部做进一个可变字体
数据可视化这个领域，过去十年的主流做法是”用 SVG 或 Canvas 画”。Frank Tisellano 做的 Datatype 走了一条几乎没人走的路：它是一个 OpenType 可变字体（variable font），你在文档里写下 {b:30,70,50,90} 这样的表达式，字体的连字替换（ligature substitution）就会把它替换成一个真正的柱状图。不要 JavaScript、不要图片、不要任何渲染库——一个 woff2 文件就是全部。本文基于其官方演示站 franktisellano.github.io/datatype 做一手分析。
一、它是什么：data as type
Datatype 的口号是 “Datatype is data as type”。它把图表压缩成三种文本表达式：
| 写法 | 渲染成 | 规则 |
|---|---|---|
{b:30,70,50,90} | 柱状图（bar） | 逗号分隔值，每个 0–100，最多 20 根柱 |
{l:10,50,30,80,20} | 迷你折线/sparkline | 逗号分隔值，每个 0–100，最多 20 个点 |
{p:65} | 饼图 | 单个 0–100 的数，表示填充百分比 |
用法就是普通的 CSS：@font-face 引入 Datatype.woff2，给需要出图的元素指定 font-family: 'Datatype'，然后直接在 HTML 里写表达式即可。图表和周围文字一样，跟随字号、字重，metrics 与正文字体对齐。
二、技术机制：连字替换 + 双轴可变字体
为什么能”写字就出图”？靠的是 OpenType 的连字特性：平时我们熟悉的连字是把 fi 合并成一个字形；Datatype 把 {b:30,70,50,90} 这串字符序列注册成一个自定义连字，排版引擎匹配到后直接替换成预先画好的图表字形。
它同时是可变字体，有两个轴：
- Width（wdth）轴：控制图表密度——柱子更疏还是更密；
- Weight 轴：控制笔画粗细，也就是柱、线的视觉权重。
上图上方是官方的实时控制台：拖动 Width / Weight 滑杆，图表立刻变形；下方是同一段 {b:30,70,20,90} 从 14px 到 64px 的逐级渲染——因为图表本质是字形，它和文字一样在任何字号下都是矢量清晰的。
三、它适合的场景：JS 跑不起来的地方
官方给的用例很有针对性：任何能放文字的地方都能放图表。最典型的是下面这个股票观察列表——30 天趋势列里的 sparkline 完全由字体渲染，和价格、涨跌幅排在一张表格里：
官方还演示了图表混排进衬线、无衬线、等宽三种正文里：“Revenue grew steadily… {l:15,28,40,52,63,78,88,95,74,58} before a seasonal dip”——趋势线就像一个普通词一样嵌在句子里。这正是它的价值主张：
- 邮件、PDF、终端、静态报表：这些场景里 JavaScript 跑不起来、图片又常被客户端屏蔽，一个字体文件就能让数据”长”在文字里；
- 嵌入正文的迷你趋势：不需要坐标轴、不需要交互，只要一个”涨了还是跌了”的视觉印象，sparkline 比真图表合适。
四、关键口径：官方与 koala 都明确写出的硬边界
这个项目的局限和它的创意一样有名，而且官方和项目库点评都没有回避：
- 数据范围被焊死在 0–100：每个值必须是 0 到 100 的整数百分比，没有对数轴、没有任意量程——它表达的是”相对高低”，不是真实数值；
- 最多 20 个点：超过这个数的序列，这个字形方案装不下；
- 完全静态、零交互：不能 hover、不能 tooltip、不能联动——它是一个”打印出来的图标”，不是活的可视化；
- 单色：图表颜色跟随文字色，做不出多系列对比配色；
- 字体加载失败就露馅：如果 woff2 没加载成功，用户看到的就是
{b:30,70,50,90}这串原文；复制粘贴、屏幕阅读器读到的也是这串表达式而不是图表——它对可访问性并不友好，图表没有替代文本语义； - 它是技术创意，不是图表库：koala 项目库点评说得很到位——“可以把它理解成一种技术创意的体现”。
五、优势与局限
优势：
- 极致轻量：一个 woff2 文件干掉一个图表库 bundle，首屏零 JS 成本；
- 无处不在：邮件、PDF、终端、RSS——只要能嵌字体/能显示文字，就能出图；
- 排版一致性：图表作为字形与正文 metrics 对齐，不会像
<img>那样在邮件里跳版； - 可变性：wdth/weight 双轴让同一套图表适配不同字号与场景。
局限：
- 表达力天花板低：无交互、单色、0–100、20 点上限，只够”氛围型”数据点缀；
- 可访问性与复制粘贴是硬伤：屏幕阅读器读不到图表语义，复制出来是语法串；
- 依赖字体加载：
font-display: swap不当会闪或露馅； - 不是通用方案：dashboard、BI 这些要坐标轴、要交互的场景，它根本不对路。
六、谁该关注它
- 做邮件/newsletter 里的数据点缀的运营/前端：sparkline 跟着正文走，图片被拦也不塌；
- 做 PDF/静态报告/终端仪表盘的工程师：不想为了几个迷你图引一个 JS 库；
- 喜欢”把一个老技术玩出新花样”的字体/排版爱好者：它是可变字体能力的一次漂亮展示。
但如果你要做的是带坐标轴、可下钻、能联动的正经数据看板，继续上 ECharts/D3——Datatype 的定位从来不是替代它们，而是占领它们到不了的那些”只能放字”的缝隙。