Inter 字体免费使用指南：变量字体接入与商用要点一次讲清
【免费下载链接】interThe Inter font family项目地址: https://gitcode.com/gh_mirrors/in/inter
Inter 字体是一款为计算机屏幕设计的开源无衬线字体家族，内置变量字体与丰富的 OpenType 功能，采用 SIL OFL 开源字体许可证，可免费用于商业项目。
本文按真实使用流程展开：先讲为什么选它，再依次解决获取、网页接入、进阶特性、商用授权和加载性能这几个问题，跟着走一遍就能上手。
为什么选 Inter 字体：为屏幕而生的无衬线体
高 x 高度：小字号下小写更清晰
Inter 的设计目标是屏幕可读性。它最突出的特点是高 x 高度，小写字母主体明显更高，x 高度约占 em 高度的 55%。在 12px、14px 这类 UI 常用字号下，小写文字依然清晰，大小写混排时也不容易糊成一片。
上图左侧是标准文本版，右侧是 Inter Display 版本。Display 版针对大字号做了优化，适合标题和展示场景，这也是仓库同时提供两套静态字体的原因。
除了字形本身，Inter 还是真变量字体，字重可在 100 到 900 之间连续调节，并内置上下文替代、斜线零、表格数字等 OpenType 功能。Figma、GitLab、Unity、Mozilla 等知名项目都在用它。
确认选型后，下一步就是把文件弄到手。📦
怎么获取 Inter 字体文件：四种安装方式
选择适合你环境的安装渠道
| 渠道 | 方式 | 适用场景 |
|---|---|---|
| 源码仓库 | git clone https://gitcode.com/gh_mirrors/in/inter | 需要参与构建或查看源文件 |
| npm | npm install inter-ui | 前端项目直接引用 |
| Homebrew | brew install font-inter | macOS 本地安装 |
| 发行版包 | apt install fonts-inter | Linux 系统安装 |
各渠道的版本更新节奏不同，对版本敏感的场景，建议直接从仓库docs/font-files/目录取最新的 woff2 或 ttf 文件。
上图是这套字体的基本面貌：9 个字重（Thin 到 Black）加对应斜体，外加 Display 光学尺寸版本，共 36 个静态文件和 2 个变量字体文件。
文件到手后，网页接入其实只需要两步。👇
怎么把 Inter 变量字体接入网页
第一步：HTML 引入 inter.css
把 docs/inter.css 和docs/font-files/目录放到你的静态资源目录下，然后在页面头部引入：
<link rel="preconnect" href="/fonts/"> <link rel="stylesheet" href="/fonts/inter.css">第二步：一行 CSS 声明字体族
:root { font-family: 'Inter', sans-serif; } @supports (font-variation-settings: normal) { :root { font-family: 'InterVariable', sans-serif; } }@supports写法的作用：老浏览器不支持变量字体时回退到静态字体，新浏览器自动用上单个变量字体文件。inter.css 中所有@font-face都带font-display: swap，避免文字在字体加载期间不可见。
基础接入完成后，还有两个方向值得挖深。
进阶特性：Inter 变量字体轴与 OpenType 功能
用 wght 轴连续调节字重
Inter 变量字体暴露wght轴，范围 100–900。用font-variation-settings: 'wght' 650这类写法，就能拿到介于 SemiBold 和 Bold 之间的字重，而不必为每个字重单独加载文件。大标题指定更高字重、正文保持 400，层次会细腻很多。
常用 OpenType 功能对照表
| 功能标签 | 作用 | 典型场景 |
|---|---|---|
calt | 上下文替代 | 标点随邻接字形自动变形 |
zero | 斜线零 | 区分数字 0 和字母 o |
tnum | 表格数字 | 数字列纵向对齐 |
liga | 连字 | 特定字母组合自动连接 |
cv01–cv14 | 字形变体 | 换 1/4/6/9 写法、紧凑版 f 和 t 等 |
用 CSS 的font-feature-settings或font-variant-numeric: tabular-nums即可启用。完整功能定义在src/features/目录下的 .fea 文件里，想定制字形时可以直接从这里入手。
功能之外，很多人最关心的是授权问题。📄
Inter 字体怎么免费商用：SIL OFL 许可证要点
允许与禁止一览
Inter 采用 SIL OFL 1.1 许可证，这是字体领域最宽松的开源许可证之一，核心内容可以压成一张表：
| 可以做 | 不可以做 |
|---|---|
| 在商业产品、网站、App 中免费使用 | 把字体文件本身单独当产品出售 |
| 随软件打包、嵌入、再分发 | 衍生字体使用 Inter 这个保留名称 |
| 修改后创建衍生版本 | 衍生版本改用其他许可证发布 |
换句话说：用它做 UI、做品牌、随产品分发都没问题，限制只有两条——"字体本身不能拿来卖"，改过的版本要换个名字并继续用 OFL。拿不准时读一遍许可证原文，全文不长。
授权没问题，最后就看加载性能。🚀
变量字体如何加速网页加载
四个降低加载成本的策略
- 优先用变量字体：2 个文件替代 36 个静态文件，字重变化不再触发额外请求。
- 保持 font-display: swap：inter.css 已默认配置，文字先用系统字体显示，字体就绪后替换，避免空白等待。
- 按语言子集化：Inter 覆盖拉丁、西里尔、希腊等书写系统，如果站点只服务单一语言，可以只保留对应子集，进一步缩小体积。
- preconnect 提前握手：字体放在独立域名或 CDN 时，用 preconnect 省掉 DNS 和 TLS 往返。
上图是 Inter 在多语言环境下的实际表现，同一套字形在不同语言里保持相近的视觉节奏——做子集化之前，先确认目标语言都在覆盖范围内。
小结
Inter 字体在屏幕可读性、变量字体支持和商用授权三方面都没有明显短板，接入成本也很低。对于以界面文字为主的产品，它是个可以放心选的默认答案。想参与构建或定制字形，可以参考 CONTRIBUTING.md 里的说明。
【免费下载链接】interThe Inter font family项目地址: https://gitcode.com/gh_mirrors/in/inter
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
