8个字重5种宽度装进1个文件Mona Sans 可变字体把字体部署变成一行font-face【免费下载链接】mona-sansMona Sans, a variable font from GitHub项目地址: https://gitcode.com/gh_mirrors/mo/mona-sans上个月我给一个内部后台换字体。原来用的静态版Bold 一个文件、Light 一个文件8 个字重就是 8 个 TTF包体直接翻倍。我把 GitHub 开源的 Mona Sans 可变字体拖进项目8 个字重、5 种宽度全装进一个 woff2。这篇文章带你从安装走到光学尺寸讲清楚它能干什么也讲清楚什么场景值得用、什么场景别勉强。它到底是什么GitHub 的可变字体Mona Sans 是 GitHub 团队和 Degarism 一起做的可变字体variable font。灵感来自工业时代的 grotesque 风格。它不是一个字体家族文件夹。而是把多个实例压进单个文件。静态字体的思路是一个字重一个文件。可变字体的思路是一个文件调出整条轴。浏览器拿到文件用 CSS 的font-weight、font-stretch在轴上滑动。它不会再请求下一个文件。五分钟上手从 clone 到第一行字渲染全程大约五分钟装完就能看到效果克隆仓库git clone https://gitcode.com/gh_mirrors/mo/mona-sans进fonts/webfonts/variable/挑一个 woff2。比如MonaSansVF[opsz,wght].woff2在 CSS 里写font-face声明font-weight: 200 900和font-stretch: 75% 125%给html套上font-family刷新页面你看到的结果同一段文字改font-weight从 200 滑到 900粗细连续变化。没有跳档。宽度从 75% 拉到 125% 也能平滑缩放。这就是可变字体和静态字体的肉眼区别。可变字体的 4 条轴怎么拼出 168 个实例Mona Sans 的设计空间很大。官方把它拆成几条轴最全能的是MonaSansVF[wdth,wght,opsz,ital]。每条轴接收一个数值输出一种字形状态wght字重200 ExtraLight 到 900 Black8 个命名档wdth宽度75 Condensed 到 125 Expanded5 个停靠点opsz光学尺寸1 到 100小字号和大标题用不同设计ital斜体0 正体、1 斜体这四条轴交叉相乘整个设计空间就是 168 个实例。要哪个点就用font-variation-settings指过去。比如.heading { font-variation-settings: wght 700, wdth 125, opsz 72; }。这条就是加粗、加宽、大标题。光学尺寸怎么验证确认 opsz 轴真的在工作最容易被忽略的是opsz轴。它不是装饰是真的换了设计。1 到 20 的小字号优化正文可读性。21 到 100 的大字号收紧字距、精修细节。验证方法很简单。写两段文字一段 12px、一段 48pxopsz都走auto。如果两段的笔画和间距不同说明轴在工作。想手动控制的话.body设font-variation-settings: opsz 12.heading设opsz 72。放大标题到 72pt 再对比两版细节设计会不一样。改变体验的几个开关字距、连字和特性集Preload 字体首屏白屏等字体下载体验很差。在head加一行 preload 指向 woff2能压住 CLS。Stylistic sets内置 10 个风格集ss01到ss10。用font-feature-settings: ss01 on, ss03 on;可切方角变音符、带尾巴的小写 l。Ligatures内置 7 个连字ff、ffi、fi等。默认就开想关就font-variant-ligatures: none;。进阶用法Mono 等宽和 Google Fonts 构建项目要写代码块、终端输出的话Mona Sans 带了一整套等宽切面Mona Sans Mono。它的字重轴和宽度轴跟正文版对齐。代码和对齐文本混排不会乱。sources/里放的是 Glyphs.app 源文件和build.sh。跑sh sources/build.sh会按 Google Fonts 规范生成googlefonts/下的产物。依赖gftools和ttfautohint。想自己改字形、重导可变轴就从这里动手。别去改编译好的 TTF。别勉强它的地方边界与避坑语言覆盖Mona Sans 主打拉丁字母。CJK 字符不在范围内做中文界面别拿它当正文配一个中文字体兜底。老浏览器可变轴依赖较新的浏览器支持。很旧的 WebView 会退化成默认实例关键页面留一个静态 woff2 兜底。许可边界走 SIL Open Font License 1.1Mona Sans 是保留字体名。可以商用、可改、可随软件分发但改完别再用这个名字发。体积单文件全轴比静态单字重大。如果你的站点只要 3 个字重切一个静态子集可能更划算。收束省下的是排版决策不是下载时间回头看Mona Sans 真正省下的不是那几个 KB 的下载。而是该用哪个字重、哪个宽度、哪个尺寸的一连串排版决策。8 个字重、5 种宽度、10 个风格集全在一条轴上。你只在 CSS 里滑动不再去挑文件。下次换字体先问自己我要的是 8 个文件还是一个能调的轴【免费下载链接】mona-sansMona Sans, a variable font from GitHub项目地址: https://gitcode.com/gh_mirrors/mo/mona-sans创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考