无需登录 数据私有 本地保存

可变字体实验场 - 调节字重/宽度/倾斜轴

CSS 开发工具 可变字体 轴 预览
83
0
0
0

可变字体实验场

实时调节字重（wght）、宽度（wdth）、倾斜（slnt）等可变轴，探索字体无限可能

支持多轴可变字体
支持 wght · wdth · slnt · GRAD · opsz 五轴
预览字号 64px
16px80px160px
可变轴控制
快速预设
Variable Fonts Are Awesome!
可直接复制使用
font-variation-settings: 'wght' 400, 'wdth' 100, 'slnt' 0;
提示：点击预览文字即可直接编辑。拖动下方滑块实时感受可变字体的魅力。当前使用 Roboto Flex 字体。

常见问题与知识点

可变字体是 OpenType 1.8 规范中引入的革命性字体格式。它将多个字体变体（如不同字重、宽度、倾斜度）整合到一个字体文件中，通过可变轴（Variation Axes）在连续范围内平滑过渡。一个可变字体文件可以替代传统的多个静态字体文件（如 Regular、Bold、Italic、Condensed 等），在文件大小和灵活性上都具备显著优势。

wght（字重）：控制笔画的粗细，范围通常为 100（极细）到 900（极粗），部分字体支持到 1000。对应 CSS 的 font-weight 属性。

wdth（宽度）：控制字符的水平宽度，100 为标准宽度，低于 100 为窄体（Condensed），高于 100 为宽体（Extended）。对应 CSS 的 font-stretch 属性。

slnt（倾斜）：控制字符的倾斜角度，通常为负值（如 -10° 到 0°），0 表示不倾斜。注意与 ital（斜体开关，0或1）轴的区别——slnt 可以连续调节倾斜角度。

使用 font-variation-settings 属性可以精确控制可变字体的各个轴。例如：
font-variation-settings: 'wght' 700, 'wdth' 85, 'slnt' -5;

对于已映射到标准CSS属性的轴，也可以使用标准属性（如 font-weight: 700; 等效于 'wght' 700），推荐同时设置以保持向后兼容。使用前需要通过 @font-face 或 Google Fonts API 加载可变字体文件。

可变字体在现代浏览器中已获得广泛支持。Chrome 66+、Firefox 62+、Safari 11+、Edge 17+ 均完整支持可变字体及 font-variation-settings 属性。全球浏览器支持率超过 96%。对于不支持的旧浏览器，可以使用传统的静态字体作为 fallback。

单个可变字体文件通常比单个静态字体文件大，但远小于多个静态字体文件的总和。例如，Roboto Flex 的可变字体文件约 1.5MB，而它替代了传统 Roboto 家族的 12+ 个静态字体文件（总计可能超过 3MB）。在需要多种字重/宽度的场景下，使用可变字体可以显著减少总体字体加载量。

目前可变字体在中文领域的应用还比较有限。思源系列（Source Han / Noto CJK）尚未推出可变版本。不过，MiSans VF（小米字体可变版）和 HarmonyOS Sans VF（鸿蒙字体可变版）是少有的支持可变轴的中文字体，主要支持 wght 轴。随着技术发展，中文可变字体的生态正在逐步完善。

GRAD（等级）轴是 Roboto Flex 等字体特有的高级轴。它允许在不改变字符宽度的情况下调整视觉重量（类似字重），这意味着调整 Grade 不会导致文本换行变化。这在深色模式切换、响应式排版等场景中非常有用——你可以让文字在视觉上更醒目，而不会破坏原有布局。

使用可变字体可以减少HTTP请求数量（一个文件替代多个），并利用 font-display: swap 等策略优化加载体验。但由于单个文件体积较大，建议配合子集化（subsetting）和WOFF2压缩使用。在需要丰富排版变化的场景（如动态标题、响应式设计），可变字体的性能优势非常明显。
🔧 相关工具