Inter 变量字体：一个文件把 9 种字重带进你的网页

Inter 变量字体：一个文件把 9 种字重带进你的网页

【免费下载链接】interThe Inter font family项目地址: https://gitcode.com/gh_mirrors/in/inter

Inter 是一款为屏幕显示设计的无衬线字体，包含 Thin 到 Black 共 9 个字重和完整斜体。变量字体版本单个文件即可交付，opsz 轴能按字号调整字形，适合网页 UI 与文档站。

适合谁：小字号界面文本是它的用武之地

Inter 属于几何新无衬线（geometric neo-grotesque），风格上接近 Roboto、San Francisco，但它最有辨识度的设计是偏大的 x 高度——也就是小写字母相对字体的比例。这背后是它的出身：Inter 最初就是为计算机屏幕做的，在 13~16px 的正文字号下，x 高度大一点，字母轮廓更清楚，长段落阅读时的视觉负担更小。

仓库里同时提供了一组大字号变体 Inter Display。两者的区别正体现在 x 高度上：

从对比图能看到，文本版 x 高度更高，Display 版在同样大写高度下 x 高度略低，大字更紧凑。所以适用场景比较明确：Web 产品界面、仪表盘、文档站这类以小字号正文为主的场景选标准文本版；如果页面里大标题很多，直接用 Display 版，或者靠变量文件的 opsz 轴切换（下文会讲）。

从零到跑起来：网页引入的最短路径

最省事的方式是自托管。把仓库克隆下来，取 docs/font-files/ 里编译好的字体文件和 docs/inter.css：

git clone https://gitcode.com/gh_mirrors/in/inter

两者放到你的 web 服务器上，页面里引用这份 CSS 后，样式这样写：

:root { font-family: Inter, sans-serif; } @supports (font-variation-settings: normal) { :root { font-family: InterVariable, sans-serif; } }

这正是 docs/inter.css 文件头部注释里给出的用法：不支持变量字体的旧浏览器回退到 9 个字重的静态文件，现代浏览器只加载 InterVariable 一份，字重 100~900 全部覆盖，请求字重变化时不会再触发新文件下载。字体显示策略它也替你处理了，CSS 里每处都是font-display: swap，正文会先用后备字体渲染，不会白屏等待。

真实项目里怎么调：opsz 光学尺寸与斜线零

InterVariable 有三个轴：wght（字重）、ital（斜体）、opsz（光学尺寸）。第三个最容易被人忽略。所谓光学尺寸，是指同一款字体在大字号和小字号下应该用不同的细节：大字号需要相对更细的笔画和更小的内部空间才显得协调，opsz 就是干这件事的轴。写进 CSS 很简单：

h1 { font-variation-settings: "opsz" 40; }

这样标题就固定用大字号形态，不必再同时维护 Inter 和 InterDisplay 两个字体名。

其余 OpenType 功能也有内置，各功能的源码按文件拆分放在 src/features/ 目录。日常用得上的两个：zero把数字 0 换成斜线零，在代码、版本号、ID 里区分数字 0 和字母 o；tnum是等宽数字（每个数字宽度相同），表格里的数字列自然对齐。像calt上下文标点替代、liga连字这类默认开启的功能，正常排版下不用操心。

能不能商用：SIL 开源字体许可证的边界

Inter 采用 SIL Open Font License 1.1，完整条款见 LICENSE.txt。对使用者来说可以归纳为四句：

• 商用没问题：随产品使用、嵌入软件、随服务分发都可以，用它做的文档不受任何限制；
• 可以修改并做衍生字体，但衍生作品必须继续用 OFL 发布，不能换成别的许可证；
• 字体本身不能当独立商品出售；想卖衍生版本，仓库说明建议先联系作者；
• "Inter" 是保留字体名，衍生作品不能沿用这个名字。

对绝大多数项目——官网、App、设计系统——这些条款不构成任何额外成本。

什么时候该考虑换一家

有两种情况值得重新评估。第一种：你的界面以中文、日文或韩文为主。Inter 的字符覆盖集中在拉丁文、西里尔文、希腊文和部分欧洲语言，CJK 字符会回退到系统字体，这种情况下更稳的做法是从一开始就按"Inter 管拉丁字母 + CJK 字体管汉字"组合设计，并在font-family里定好回退顺序。第二种：你需要字宽变化。Inter 只有 wght、opsz、ital 三个轴，没有 condensed 或 expanded，如果密集数据面板确实在横向空间上捉襟见肘，可以去看带宽度轴的字体家族。

如果你的产品是小字号为主的 Web UI，又不想维护一堆字重文件，直接克隆仓库、把 docs/font-files/ 挂到服务器上，然后在 14px 正文和 32px 标题两个尺寸下验证效果，就是最短的一条验证路径。

【免费下载链接】interThe Inter font family项目地址: https://gitcode.com/gh_mirrors/in/inter