《Datatype：用字体把文字变成图表的魔法》

Thu, 30 Apr 2026 07:32:52 GMT

《Datatype：用字体把文字变成图表的魔法》

标签：#前端 #OpenType #可变字体 #数据可视化 #字体设计

总结：

Datatype 是一款开源可变字体，利用 OpenType 连字替换技术，将纯文本表达式（如

{b:30,70,50,90}`）实时渲染为条形图、折线图和饼图，无需任何 JavaScript 或图片资源。它通过 CSS 的 `font-variation-settings

控制字宽和字重，WOFF2 仅 73KB，兼容所有现代浏览器，为网页和桌面应用提供了一种零依赖、高性能的轻量级数据可视化方案。

文章要点：

- **纯字体驱动，零 JS 依赖**：利用 OpenType 的 calt`（上下文替换）和 `liga`（标准连字）特性，把 {b:1,3,7}` 这类文本直接变成条形图，不需要加载任何图表库或图片
- **三种图表，一句话搞定**：支持条形图 {b:...}`、折线图 {l:...} 和饼图 {p:...}`，每种最多支持 20 个数据点，数值范围 0–100，语法简单得像在聊天
- **可变字体，随意调节**：通过 `wdth`（字宽 50–150）和 `wght`（字重 100–900）两个轴，可以像调音量一样控制图表的间距和线条粗细，适配不同排版场景
- **轻到不可思议**：WOFF2 格式仅 73KB，TTF 4MB，覆盖 Google Fonts Latin Core 字符集，对网页性能几乎零负担
- **开箱即用，跨平台友好**：Web 端一行 `@font-face` 即可；桌面端安装 TTF 后，在 Adobe 等支持 OpenType 连字的软件里直接粘贴文本就能出图
- **开源可定制**：基于 Python + fontTools 构建，提供完整的构建脚本和开发服务器，方便开发者二次修改或扩展新的图表类型

文章URL：https://github.com/franktisellano/datatype

GitHub

GitHub - franktisellano/datatype: Datatype is a variable font that turns text into charts.

Datatype is a variable font that turns text into charts. - franktisellano/datatype

可变字体 | 锤子前端

《Datatype：用字体把文字变成图表的魔法》