8 个字重不够一个标题GitHub Mona Sans 可变字体实测单文件覆盖 168 种样式【免费下载链接】mona-sansMona Sans, a variable font from GitHub项目地址: https://gitcode.com/gh_mirrors/mo/mona-sans上个月我给内部数据看板定视觉。设计规范写页面标题用 650 字重、栏头比正文宽 10%。我翻了手头字体目录只有 8 档离散字重600 偏细、700 偏粗宽 10% 根本无从表达。就在我准备将就或者开始堆文件的时候想起 GitHub 开源的Mona Sans 可变字体——可变字体指单个文件里内置字重、宽度等多条轴能在区间内连续插值出无数中间样式。它把 168 种样式装进了几个文件里。这篇文章带你走完安装、首跑结果、文件拆分的原理以及什么场景下别用它。Mona Sans 可变字体怎么装3 条命令约 5 分钟上页面全程约 5 分钟只需两步命令加一段声明克隆仓库git clone https://gitcode.com/gh_mirrors/mo/mona-sans把全设计空间的文件拷进站点静态目录cp fonts/webfonts/variable/MonaSansVF[wdth,wght,opsz,ital].woff2 ./static/在 CSS 里用一段font-face声明它font-face { font-family: Mona Sans VF; src: url(MonaSansVF[wdth,wght,opsz,ital].woff2) format(woff2-variations); font-weight: 200 900; font-stretch: 75% 125%; }不需要字体子集化也不用再按样式名管理一堆文件。Mona Sans 可变字体首跑结果1 个文件到底省了什么第一次跑完我在 DevTools 里做了一组直接对比静态字体方案页面只加载 Regular、Medium、SemiBold、Bold 就是 4 个请求合计约 470KB要凑齐 8 档字重超过 1MB可变字体方案仅 1 个请求、521KB 的 woff2字重 200–900 连续可调宽度 75%–125% 连续可调斜体与光学尺寸全带。把标题设成 650 字重、108% 宽度浏览器直接渲染出来没有最近字重回退也没有字体闪烁。仓库结构也很清楚fonts/variable/下 11 个可变 TTFfonts/webfonts/variable/下对应 22 个 woff/woff2完整四轴版 TTF 1.4MB、压成 woff2 后 521KB。Mona Sans 可变字体原理4 条轴为什么拆成 11 个文件Mona Sans 有 4 条轴wght字重200–900、wdth宽度75–125、opsz光学尺寸1–100、ital斜体0–1。全塞进一个文件体积很大多数页面也用不满 4 条轴于是项目按轴组合把它切成 11 个可变文件只用字重和光学尺寸的MonaSansVF[opsz,wght].ttf只有 340KBCondensed/Expanded 变体固定宽度为 75/125各约 524KB完整四轴版则是 1.4MB。拆分规则写在sources/config.yaml里轴顺序固定为 wdth、wght、opsz、ital。其中 opsz 轴最容易被忽略字号落在 1–20 区间时字体会自动放大字腔、加粗笔画为正文可读性优化到 72 以上切换为细节更精细、间距更紧的展示切面。写上font-optical-sizing: auto浏览器会自己按字号取值无需手动指定。Mona Sans 可变字体进阶字形集、连字与等宽变体字形集 ss01–ss10通过font-feature-settings开关字母变体比如 ss06 换成双层 g、ss03 给小写 l 加尾巴适合给品牌页面做差异化。7 组连字ff、ffi、fi、fl 等在比例文本中自动合并零配置。Mona Sans Mono 等宽变体fonts/variable/里的 Mono 系列提供 8 字重 × 5 宽度的等宽可变字体正文与代码块可以用同一套字族。200 个静态实例遇到不支持可变字体的环境fonts/static/和fonts/webfonts/static/里 200 份 TTF/OTF/WOFF2 实例直接取用不用自己生成。Mona Sans 可变字体边界4 种场景别硬用环境不支持可变字体老浏览器、部分原生应用和文档编辑器只能加载静态实例务必保留 fallback。默认拿最大的文件完整四轴 woff2 是 521KB只用字重时 135KB 的MonaSansVF[opsz,wght]版本足够按实际用到的轴选文件。wdth 轴不默认生效不声明font-stretch或font-variation-settings时浏览器只走 100% 宽度窄体、宽体变体要显式调用。商用授权OFL 1.1 允许免费使用、嵌入和修改但不允许把字体文件单独当商品出售二次分发前确认条款。写在最后回头看Mona Sans 省下的不是下载一个字体文件的动作而是动作背后的环节4 个请求缩成 1 个、650 字重无档可用的妥协、200 个静态文件的命名管理、标题和正文分别挑尺寸的来回沟通。可变字体把选字从货架上挑文件变成了在一个空间里拧旋钮。下次设计规范再写出650 字重、108% 宽度时你还会去翻文件管理器找对应的字体吗【免费下载链接】mona-sansMona Sans, a variable font from GitHub项目地址: https://gitcode.com/gh_mirrors/mo/mona-sans创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考