Elysia Tools
导航
Design
上传可变字体（TTF/OTF/WOFF/WOFF2），检视 fvar 轴与命名实例，浏览器内实时预览插值效果，并生成可直接复制的 font-variation-settings CSS、高级属性等价写法与可变 @font-face 声明。
详情
基于 opentype.js 读取 OpenType fvar 表（各轴 min/default/max 与命名实例），WOFF2 先经 wawoff2（WebAssembly 移植）解压。CSS 生成遵循 CSS Fonts Level 4 §8.2：轴标签大小写敏感、重复标签以最后一次为准、输出列表按 code unit 升序去重（与规范计算值一致）。存在高级替代属性时（wght→font-weight、wdth→font-width、slnt/ital→font-style 且 slnt 角度取反、opsz→font-optical-sizing）一并给出推荐写法。预览将字体以 data-URI @font-face 内嵌，渲染每条轴的极值、全部命名实例、自定义坐标，并提供实时打印 CSS 的滑杆 playground。
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
工具使用指南
可变字体轴实例与 CSS font-variation-settings 构建器是一款在线字体检视与代码生成工具。上传 TTF、OTF、WOFF 或 WOFF2 字体后，工具会自动解析 OpenType fvar 表中的全部轴范围与命名实例，提供浏览器内交互滑杆实时渲染，并生成符合 CSS Fonts Level 4 规范的 font-variation-settings 声明与高级属性替代写法。
背景
项目中引入了 Cabin 可变字体，需要在移动端大标题中应用比 SemiBold 略粗且字面稍窄的特定样式。
问题
需要快速确定 Cabin 的支持轴区间，并获取标准 CSS 属性代码。
如何使用
上传 cabin-vf.ttf 文件，在轴取值中输入 wght=650, wdth=90，预览文本输入 Cabin Variable 0123 并查看生成报告。
wght=650, wdth=90结果
成功检视 2 条轴与 4 个命名实例，生成了规范的 font-variation-settings: "wdth" 90, "wght" 650; 以及推荐的高级属性 font-weight: 650; font-width: 90%;。
背景
正在测试包含十余条自定义轴的参数化工程字体 AmstelvarAlpha，需要查看所有轴的极值并测试微调效果。
问题
该字体无预设命名实例，需要统一查看 17 条轴的默认坐标与参数极值。
如何使用
上传 sample.ttf 文件，轴取值留空以读取默认设置，在输出报告中使用交互滑杆逐一调节参数并预览。
结果
完整列出 opsz、wght、PWGT、GRAD、XOPQ 等 17 条轴的 min/default/max 范围，并提供了各轴极值对比预览与实时 CSS 代码。
支持 TTF、OTF、WOFF 以及 WOFF2 格式的可变字体文件。
依据 CSS 规范，当存在 font-weight、font-width 等高级属性时，优先使用高级属性可确保更好的样式继承与浏览器兼容性。
有区别。OpenType 轴标签区分大小写，小写通常代表 OpenType 注册标准轴，大写通常代表字体设计师自定义轴。
使用键值对格式输入，多个轴用逗号或空格分隔，例如 wght=650, wdth=90。
不会。字体解析与渲染全部在浏览器本地完成，文件不会上传或存储到远程服务器。