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

可变字体调节器 - 拖拽轴权预览

前端设计 排版工具 可变字体 字体 预览
60
0
0
0

🎛️ 可变字体调节器

拖拽轴权滑块，实时预览可变字体（Variable Fonts）的无穷变化

The quick brown fox jumps over the lazy dog. 0123456789
🎚️ 轴权调节 Axes Control
📋 生成的 CSS 代码
font-family: 'Roboto Flex', sans-serif;
font-variation-settings: "wght" 400, "wdth" 100, "slnt" 0;
📚 常见问题 & 知识点
什么是可变字体（Variable Fonts）？
可变字体是 OpenType 1.8 规范引入的字体格式，它将多个字体样式（如不同字重、宽度、倾斜度）整合在单一字体文件中。通过调节"轴"（Axis）参数，你可以在连续的范围内获得任意中间样式，而无需加载多个独立字体文件。这意味着更小的文件总大小和更丰富的排版可能性。
可变字体有哪些常见轴？
最常见的5个注册轴包括：wght（字重，100-900）、wdth（宽度，如50%-200%）、slnt（倾斜角度）、opsz（光学尺寸，优化不同字号的渲染）、ital（斜体切换）。此外，字体设计师还可以定义自定义轴，如 Roboto Flex 的 GRAD（等级）、Fraunces 的 SOFT（柔和度）和 WONK（不规则度）等。
如何在网页中使用可变字体？
使用 CSS 的 font-variation-settings 属性来设置轴值。例如：font-variation-settings: "wght" 650, "wdth" 115;。部分轴有对应的标准 CSS 属性（如 wght 对应 font-weight），但 font-variation-settings 是最通用的方式。使用 Google Fonts 或自托管可变字体文件均可。
可变字体的浏览器兼容性如何？
可变字体在现代浏览器中已得到广泛支持。Chrome 66+、Firefox 62+、Safari 11+、Edge 17+ 均支持可变字体。全球覆盖率超过96%。对于不支持的旧浏览器，可以使用 @supports 查询提供回退样式。
使用可变字体对网页性能有什么影响？
可变字体通常比加载多个独立字体文件更高效。一个包含完整字重范围的可变字体文件可能只需 200-400KB（压缩后），而加载 Regular + Bold + Italic 三个独立文件可能超过 300KB。此外，可变字体减少了 HTTP 请求数量，有助于提升页面加载速度。
这个工具支持哪些可变字体？
本工具预置了6款高质量可变字体：Roboto Flex（轴最全面，支持字重/宽度/倾斜/光学尺寸/等级）、Inter（优雅的UI字体）、Montserrat（几何风格）、Open Sans（经典无衬线）、Fraunces（带柔和度与不规则度轴的衬线字体）、Recursive（趣味性可变字体，支持 Casual/Cursive/Monospace 轴）。所有字体通过 Google Fonts 动态加载。
🔧 相关工具