Inter 字体完整指南：3 行 CSS 让屏幕排版进入专业水准

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

Inter 是一款为计算机屏幕设计的 SIL OFL 开源可变字体，同时提供 9 个字重的静态字体文件。用 2 行 HTML 加 3 行 CSS，就能给你的产品带来高 x 高度、针对屏幕优化的排版，且可免费用于商业项目。

界面正文为什么难读：屏幕优化的设计逻辑

UI 正文通常只有 12–14px。许多字体按纸质印刷优先设计，在这个尺寸下 x 高度（小写字母高度）偏低的字体，字母会挤成一团，"e""a" 这类细节难以分辨。

Inter 就是针对这个场景做的：它属于几何新无衬线风格（与 Roboto、Apple San Francisco 相近），但采用刻意加高的 x 高度，并做了小字号栅格化优化——例如低于 12px 时，"E""F" 的水平中杆会按两个半透明像素绘制，优先保证高分辨率下的清晰度，而不是强求 11px 时的锐利。Figma、GitLab、Unity、ElementaryOS、Mozilla 以及 NASA Artemis II 项目都在用它。

Inter 可变字体是什么：两种形态、九个字重、从哪里拿

Inter 以两种形态分发：

• 可变字体 InterVariable：单个文件覆盖 100–900 全部字重，含opsz（光学大小，16 文本版 / 32 大字版）与wght（字重）两个轴，斜体是独立文件
• 静态字体：Thin 到 Black 共 9 个字重，正体与斜体各一套，另附用于大字号的 InterDisplay 家族

当前版本 4.1，覆盖 2900 多个字形，包含完整拉丁字母、西里尔字母及大量符号。获取渠道：

npm install inter-ui # NPM brew install font-inter # macOS Homebrew

上面两条命令把字体装进本地环境；网页项目则不需要安装，直接引用官方 CDN 的 inter.css 即可，Ubuntu 也有fonts-inter包。

三行代码完成 Inter 网页集成：CDN 与回退策略

官方 docs/inter.css 一次定义三个字体家族：InterVariable（可变字体，现代浏览器）、Inter（静态，小光学大小）和InterDisplay（静态，大光学大小），全部声明了font-display: swap避免文字加载时的空白闪烁。引用官方 CDN 的 inter.css 后，无需自己托管字体文件：

<link rel="preconnect" href="https://rsms.me/"> <link rel="stylesheet" href="https://rsms.me/inter/inter.css">

接着在 CSS 里设置字体栈，用@supports做回退，保证不支持可变字体的老浏览器也能拿到静态字体：

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

注意Inter var是 2023 年 10 月的旧名称，InterVariable是现用名称，两个名字在 inter.css 中都有定义，混用不会出错，但新代码建议直接写InterVariable。

调优 opsz 与 OpenType 特性：可变字体的细节空间

可变字体最有价值的轴是opsz：16 是文本版（x 高度更高，正文更清晰），32 是 Display 版（x 高度更低，大字号下比例更均衡）。同一个字母 X 在两种光学尺寸下差异明显：

浏览器默认会按font-size自动选择光学尺寸（font-optical-sizing: auto）。如果标题字号没到自动切换的阈值、想强制用大字版，可以显式指定：

h1 { font-size: 48px; font-variation-settings: 'opsz' 32, 'wght' 700; } p { font-size: 16px; font-variation-settings: 'opsz' 16; }

OpenType 特性是另一层细节，Inter 内置了相当多（源码见 src/features/）：

• calt上下文替代：标点根据相邻字形自动换形
• zero斜线零、tnum表格数字：区分 0 与 o，数字等宽对齐
• frac/subs/sups：分数、下标、上标
• cv01–cv14：14 组可选字形（旧式 1/4/6/9、带尾 l、直 u、两种德式尖角 s、带衬线 i 等）
• ss02/ss04/ss05/ss06：圆形、方形等特殊样式

一行开启最常用的组合：

body { font-feature-settings: "calt", "zero", "tnum"; }

想直观感受可变字体的插值效果，仓库自带交互式测试页 docs/lab/，多语言排版样本在 docs/samples/，构建产物（woff2/ttf）都在 docs/font-files/ 下。

商业使用的许可边界：SIL OFL 1.1 允许与禁止什么

Inter 采用 SIL Open Font License 1.1，完整文本见 LICENSE.txt。做产品决策前对照这份清单：

• ✅商用与修改：可随软件捆绑、嵌入产品、用于盈利服务，也可修改后制作衍生字体
• ❌单独出售字体：不能把 Inter 或其衍生版作为独立产品销售
• ❌占用字体名与更改许可：衍生字体必须改名（"Inter" 是保留字体名，商标归 Rasmus Andersson / RSMS），且只能继续以 OFL 1.1 发布

需要强调的是，许可约束的是字体文件本身的传播，不受限你用 Inter 生成的任何文档、界面截图或商业内容。对绝大多数项目来说，Inter 就是无成本选项。

常见坑与选型建议：引入 Inter 前的三件事

三个容易踩的坑：

1. 用 Google Fonts 的 Inter：那是旧版本且没有斜体，README 的官方回答是"不建议，除非别无选择"
2. 把 InterDisplay 当正文用：Display 家族 x 高度更低，为大字号设计；正文应走文本版（opsz 16 或静态 Inter）
3. 自托管却不做子集化：可变字体单文件包含全部 2900 多个字形，页面只用到拉丁字符时，先按实际字符子集化再上线，能省掉可观的流量

选型建议：现代浏览器覆盖为主的项目，一个 InterVariable 文件加静态回退足够；有大标题、海报场景的，把 opsz 轴用起来；需要修改字形参与贡献的，看 CONTRIBUTING.md，源码在src/的 Glyphs 包中，make var_web可以快速编译可变字体。

落地时按这个顺序推进：

1. 在项目中引入 inter.css，把字体栈改成InterVariable+ 静态回退
2. 正文保持opsz16，标题按字号显式指定 32
3. 数据密集型页面打开calt、zero，数字表格场景加tnum
4. 对外发布前，对照 LICENSE.txt 核对一遍衍生与分发行为

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