免费 Typeface.json 字体转换器
转换 TTF and OTF 字体为 Three.js 的 typeface.json,即时在浏览器中完成 — 100% 免费、私密、无需上传服务器。
点击或将字体文件拖放到此处
支持 TTF 和 OTF(最大 50MB)
转换设置
仅转换指定字符以限制输出文件大小。
如果您的 3D 文字看起来里外翻转,请使用此选项。
font.ttf
准备转换
3D 预览
WebGL上传字体以查看预览
什么是 typeface.json?
It's a JSON-based font format used by Three.js `FontLoader`. Converting your TTF files allows them to be loaded asynchronously in web applications without needing complex parsing libraries at runtime.
Read the full tutorial什么是字体转换器?
Vextrude 字体转换器是一款免费的浏览器工具,可将任何 TTF 或 OTF 字体转换为 Three.js 的 typeface.json 格式——这是 3D 文字库构建真实、挤出字母所需的文件。拖入一个字体,调整字符集和贝塞尔精度,一键下载可用的 JSON。一切均在本地运行,你的字体从不离开你的机器。
如何将字体转换为 typeface.json
仅需四个简单步骤,就能从原始字体文件得到 Three.js 可用的 typeface.json——全部在你的浏览器中完成。
上传字体
拖放 .ttf 或 .otf 文件(或点击浏览)。也支持批量上传——一次添加多个字体。
调整设置
选择字符子集(拉丁、西里尔、符号…)和贝塞尔精度以减小文件体积。
实时 3D 预览
在确认之前旋转已加载字体的挤出 3D 样本 — 提前发现字形问题。
下载
保存 typeface.json、复制到剪贴板,或将多个字体批量导出为一个 .zip。
为什么选择 Vextrude 字体转换器?
为需要快速、私密字体转换的 Web 开发者和设计师而造。
100% 私密且安全
一切均在你的浏览器中使用 opentype.js 本地发生。你的字体从不传入服务器——无上传、无追踪、无分析。
即时转换
拖入字体,一瞬就能得到 typeface.json。无需排队、无需服务器往返、无每日限额。
批量转换
一次拖入十余个字体,一个 .zip 就能全部下载 — 适合为游戏或网站搭建共享字体库。
字符子集化
仅发布需要的字形。修剪非拉丁文字或繁重的符号集,导出的 JSON 会相应变小——为你的打包文件真正减量。
兼容 Three.js
输出可直接加载到 FontLoader / TextGeometry(以及 react-three-fiber 中 Drei 的 <Text3D>),无需任何转换或包装代码。
永久免费
无需注册、无水印、无文件大小付费。对每个你拥有转换权限的字体均免费供个人和商业使用。
字体与 typeface.json 基础
将字体文件转换为 3D 可用字形数据时需要知道的一切。
什么是 typeface.json?
一个 JSON 文件,将字体中的每个字形存为一系列贝塞尔命令(moveTo、lineTo、quadraticCurveTo、cubicCurveTo)。Three.js 的 FontLoader 将这些路径转为 ShapeGeometry,TextGeometry 再将其挤出为真实的 3D 字母。它是介于“字体文件”与“3D 网格”之间的格式。
为什么不直接加载 TTF?
Three.js 的 TextGeometry 需要一个可挤出的特定形状结构。原始 TTF/OTF 文件包含很多 Three 用不到的内容(提示、字寽表、OpenType 特性),直接发送到浏览器不但浪费带宽,还会迫使每位访客为了画一个标题就去解析一份字体。
贝塞尔精度
贝塞尔精度(或曲线分段数)控制字形轮廓的平滑程度。越高 = 3D 字母越平滑,但 JSON 也越大。UI 标签和标题使用 6–8 已与原始字体难以区分;英雄图可提升到 12–16。
字符子集化
真实字体往往包含数千个字形——拉丁、西里尔、希腊、CJK、符号、连字。如果你只需“VEXTRUDE 2026”,子集化会在导出前舍弃其余。一个 4 MB 的 CJK 字体仅导出拉丁部分可能仅剩几 KB。
许可与合理使用
只转换你拥有嵌入权限的字体。大多数商业字体允许 Web 使用,但不允许以原始字形数据的形式重新分发——阅读 EULA。开源字体(SIL OFL、Apache)对应用和共享存储库都最安全。
使用输出
如果 JSON 已在内存中,使用 FontLoader.parse(),否则使用 FontLoader.load() 获取。将返回的 font 传给 TextGeometry,添加材质,挤出,完成。
转换后的四款字体
在本工具中渲染



同样两个字母在转换之后,由工具自带的预览绘制。一款厚重的无衬线体、一款笔刷手写体、一款方正的展示字体,以及一款历史悠久的安色尔体——轮廓直接取自各自的字体文件,所以你在这里看到的,就是 TextGeometry 将要挤出的形状。
支持的字体格式
拖入你的设计应用和浏览器已在使用的字体——转换器能读取它们全部,并输出 Three.js 需要的格式。
TTF
TrueType
最常见的桌面和网络字体,基于二次贝塞尔轮廓。作为输入完全支持。
OTF
OpenType
具备高级排印特性的 TTF 超集。三次贝塞尔轮廓与 OpenType 特性均可洁净解析。
typeface.json
输出
Three.js 自己的 JSON 字体格式。以下载文件或批处理 .zip 形式提供。
.zip
批量包
多个字体排入队列时,一个压缩包会汇集每个 typeface.json 以及一份清单。
输入
输出
适配你的 3D 技术栈
导出的 JSON 可直接接入每个常见的 Three.js 集成方案——无需包装代码或格式适配层。
Three.js
FontLoader / TextGeometry
正宗用途——JSON 格式由 Three.js 设计。加载、解析、挤出。
react-three-fiber
Drei <Text3D>
将 JSON 传给 Drei 的 Text3D 组件,在 React 中获得声明式 3D 排印。
游戏与 WebXR
AR/VR 标签
在基于浏览器的游戏和 WebXR 体验中交付清晰的 3D 标识与 HUD。
数据可视化
图表与仪表盘
在浏览器中为地图、金融图表和科学绘图挤出自定义标签字体。
常见问题
关于 Vextrude 字体转换器你需要知道的一切。
什么是 typeface.json 字体?
这是 Three.js 自己的 JSON 字体格式。它不存储编译后的字体文件,而是将每个字形存为贝塞尔路径数据,这样 FontLoader 就能将每个字母变为 shape,TextGeometry 再将其挤出为真实的 3D 网格。
我的字体会上传到服务器吗?
不会。一切均通过 opentype.js 和 File API 在你的浏览器中本地运行。转换器从不上传、缓存或记录你拖入的字体。
我可以转换哪些字体格式?
TrueType (.ttf) 和 OpenType (.otf)。二次和三次贝塞尔轮廓均支持。仅位图字体与仅可变轴(无任何静态实例)是主要不能使用的情形。
如何在 Three.js 中使用输出?
使用 FontLoader 加载(loader.load() 或 loader.parse()),将返回的 font 传给 TextGeometry,然后将生成的 mesh 添加到你的场景中。使用 react-three-fiber 时可以将其传给 Drei 的 <Text3D> 组件。
如何减小 JSON 体积?
两个杂杆:字符子集化(删除不需要的文字和符号)和贝塞尔精度(较低值使曲线略不平滑但文件小得多)。两者均在“Conversion Settings”面板中提供。
我可以一次转换多个字体吗?
可以。将多个 .ttf/.otf 文件拖入批处理区,点击“Convert & Download All”,你就会得到一个 .zip,里面包含每个 typeface.json。
商业使用免费吗?
工具本身对个人和商业使用均免费。生成的 typeface.json 能否重新分发取决于你的字体许可——在公开产品中交付 JSON 之前请检查任何商业字体的 EULA。
支持非拉丁文字吗?
是的——只要源字体包含所需文字的字形,西里尔、希腊、阿拉伯、希伯来、天城、泰文、CJK 等都能干净地转换。