# 可变字体轴实例与 CSS font-variation-settings 构建器

上传可变字体（TTF/OTF/WOFF/WOFF2），检视 fvar 轴与命名实例，浏览器内实时预览插值效果，并生成可直接复制的 font-variation-settings CSS、高级属性等价写法与可变 @font-face 声明。

> 标准页面: https://elysiatools.com/zh/tools/variable-font-axis-instance-and-css-font-variation-settings-builder

- **分类:** Design

- **关键词:** 可变字体, fvar 轴, 命名实例, font-variation-settings css, 字体轴预览, woff2 检视

## 概述

基于 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。

## 输入项

- **字体文件** (file): Upload a variable font (.ttf / .otf / .woff / .woff2)
- **轴取值** (textarea): e.g. wght=625, wdth=110 — leave empty to inspect the font defaults
- **预览文本** (text): Defaults to "Handgloves 0123 — AaBbGgQqRr ÄÖÜ äöü ß ½ ¼ ←→"

## 适用场景

- 需要检视可变字体包含的轴标签、取值范围（min/default/max）与预设命名实例时。
- 需要为网页微调可变字体的自定义坐标，并生成规范化 CSS 样式代码时。
- 需要在浏览器环境中实时对比可变字体的各轴极值与插值渲染效果时。

## 工作原理

- 上传可变字体文件，工具通过内置解析模块读取字体内部的 fvar 表元数据与命名实例（WOFF2 自动通过 WebAssembly 解压）。
- 输入自定义轴坐标或拖动滑杆调节参数，预览区通过嵌入 data-URI 的 @font-face 实时渲染文本字形。
- 依据 CSS Fonts Level 4 规范对轴标签进行大小写校验、去重并按字符编码升序排序，输出 font-variation-settings 及对应的高级 CSS 属性代码。

## 使用案例

- 前端工程师为响应式网页排版配置精确的字体字重、宽度与光学尺寸 CSS。
- UI/UX 设计师在浏览器中快速校验可变字体的命名实例与极限轴形态渲染质量。
- 字体设计师验证新导出的可变字体文件的 fvar 元数据及插值平滑度。

## 常见问题

### 工具支持哪些字体文件格式？

支持 TTF、OTF、WOFF 以及 WOFF2 格式的可变字体文件。

### 为什么工具会推荐使用 font-weight 而不是 wght 轴设置？

依据 CSS 规范，当存在 font-weight、font-width 等高级属性时，优先使用高级属性可确保更好的样式继承与浏览器兼容性。

### 轴标签的大小写有区别吗？

有区别。OpenType 轴标签区分大小写，小写通常代表 OpenType 注册标准轴，大写通常代表字体设计师自定义轴。

### 自定义轴取值应该如何输入？

使用键值对格式输入，多个轴用逗号或空格分隔，例如 wght=650, wdth=90。

### 上传的字体文件会被保存在服务器上吗？

不会。字体解析与渲染全部在浏览器本地完成，文件不会上传或存储到远程服务器。

## 相关工具

- [PDF 删除线审阅提取器](https://elysiatools.com/zh/tools/pdf-strikethrough-review-extractor): 检测 PDF 审阅稿中的删除线内容，并生成适合合同、制度和修订稿分析的报告
- [跟读提示生成器](https://elysiatools.com/zh/tools/audio-read-along-cue-generator): 从旁白音频及其脚本生成句子或单词级时间戳提示,用于卡拉OK式跟读和语言学习。
- [字体文件检视器（TTF / OTF / WOFF / WOFF2）](https://elysiatools.com/zh/tools/font-file-inspector): 上传 TTF、OTF、WOFF 或 WOFF2 字体文件（WOFF2 自动解压），检视完整元数据：家族/子族/设计师/版权/版本、字形数、unitsPerEm、字重与宽度级别、斜体角度、风格标志、包围盒；按 Unicode 区块统计覆盖热力图；渲染字形 SVG 预览（可自定义文本，图标字体自动采样）；列出 GSUB 连字（liga）与 OpenType 特性；可变字体显示 fvar 轴与命名实例。
- [图片调色板转设计令牌](https://elysiatools.com/zh/tools/image-to-design-tokens): 从图片中用 k-means 聚类提取主色，导出为 CSS 变量 / SCSS 变量 / Tailwind 配置 / JSON 设计令牌，并自动为每个颜色生成命名色阶
- [VP8 图像分析器](https://elysiatools.com/zh/tools/vp8-image-analyzer): 使用 Sharp 分析 WebP/VP8 图像，生成灰度位移图，并用 Three.js 渲染可旋转的 3D 浮雕表面
- [CSS 流体排版 Clamp 计算器](https://elysiatools.com/zh/tools/css-fluid-typography-clamp-calc): 输入最小/最大视口与字号边界，输出 clamp() 表达式、可复制 CSS 与实时预览数据
- [CSV 转数据库迁移规划器](https://elysiatools.com/zh/tools/csv-to-database-migration-planner): 根据 CSV 数据推断关系型 schema，并为 PostgreSQL、MySQL、SQLite 或 SQL Server 生成建表和 ALTER 迁移计划
- [图片隐写术：嵌入与检测](https://elysiatools.com/zh/tools/image-steganography-embed-detect): 把文字藏进 PNG 的最低有效位、再原样提取，并运行 Westfeld–Pfitzmann 卡方隐写分析（含滑窗 p 曲线与 LSB 位平面预览）。

## 示例

- [可变字体示例](https://elysiatools.com/zh/samples/variable-font-samples): 包含fvar轴的可变字体文件，用于轴/实例检查器和CSS构建器
- [Bulma CSS 框架示例](https://elysiatools.com/zh/samples/bulma): Bulma CSS框架示例，包括列、组件、表单控件、布局系统和现代化基于CSS的设计模式
- [CSS选择器示例](https://elysiatools.com/zh/samples/css-selectors): 用于提取和分析测试的CSS选择器示例集合
- [无效变量名代码示例](https://elysiatools.com/zh/samples/code-invalid-variable-names-samples): 展示不同编程语言中无效变量命名约定的示例代码文件