Inter 开源字体入门指南：可变字体 + 双光学尺寸，3步集成到你的项目

Inter 开源字体入门指南：可变字体 + 双光学尺寸，3步集成到你的项目

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

Inter 是一款由 Rasmus Andersson 设计、专为计算机屏幕优化的开源字体（SIL Open Font License 1.1 授权）。高 x 高度提升小字号可读性，可变字体技术让一个文件覆盖 100~900 全部字重。读完本文，你能在网页项目里集成 Inter 可变字体，并学会用 OpenType 特性解决数字排版问题。

项目画像：一支为屏幕而生的字体家族

它在同类项目里的位置：系统自带字体（如 SF）免费但不可跨平台分发，商业授权字体可商用但收费，Inter 用 OFL 授权填补了"可商用 + 可分发 + 为屏幕优化"这个空档。Figma、GitLab、Unity、Mozilla 等项目都在用它。仓库同时开源了完整的构建体系，想了解字体工程本身的人可以研究 src/README.md 里的源码结构。

快速上手：4步把 Inter 跑起来

1. 环境准备：Web 集成只需要一个现代浏览器；桌面使用只需操作系统自带字体管理。

2. 获取项目：

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

字体文件都在 docs/font-files/：可变字体是InterVariable.woff2与InterVariable-Italic.woff2（另有 TTF 版本），静态字体是 18 个字重 × 正斜体共 36 个 WOFF2 文件。

3. 运行起来：把docs/font-files/整个目录和 docs/inter.css 复制到你的 Web 项目静态资源目录，保持相对路径不变。inter.css内部通过@font-face声明了三组字体族名：

• InterVariable：可变字体，一条声明覆盖 100~900
• Inter：静态字重，小光学尺寸，兼容旧浏览器
• InterDisplay：静态字重，大光学尺寸

页面里按官方推荐写法声明回退逻辑：

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

4. 验证成功：临时加一句:root { font-weight: 347; }。如果字体渲染出 347 这种非整百字重，说明可变字体生效——这是静态字重做不到的。

桌面端使用：把docs/font-files/InterVariable.ttf（或任意.ttf）安装到系统即可，macOS 双击文件进入字体册安装，Windows 右键安装，Linux 复制到家目录字体文件夹后执行fc-cache -f。注意 WOFF2 是 Web 格式，桌面安装请选 TTF。

核心能力拆解：4个值得用的设计

能力一：可变字体，一个文件 9 档字重

价值：传统方案要 9 个字重加载 9 个文件，Inter 把 Thin(100) 到 Black(900) 全部压进一个InterVariable.woff2，体积只有静态全集的一小部分，且字重可连续取值。

怎么用：inter.css里已声明font-weight: 100 900，你只需在 CSS 里写font-weight，浏览器自动从可变轴插值。正文 400、强调 600、标题 800，一个文件全搞定。

能力二：双光学尺寸，正文和标题各用一套

价值：小字号需要高 x 高度保证可读性，大字号则需要收紧比例避免笨重。Inter 把这两套优化拆成Inter（文本版）和InterDisplay（显示版）两个子家族，而不是让你一个字体硬扛所有字号。

怎么用：正文区用Inter，40px 以上的大标题、海报式排版切换为InterDisplay。两者的 x 高度差异直观如下：

能力三：OpenType 特性，解决数字排版的真实痛点

价值：等宽数字让表格列对齐，斜杠零（slashed zero）让0和o不再混淆，还有上标/下标、分数字形等专业排版能力，源码见 src/features/。

怎么用（CSS 声明示例）：

.tabular { font-feature-settings: "tnum"; } /* 表格数字等宽对齐 */ .code { font-feature-settings: "zero"; } /* 斜杠零 */

此外还内置 14 组字符变体（cv01~cv14），比如开放顶数字、带尾巴的小写 L、紧凑版 f/t、单层 a 等，在 docs/lab/ 的字体实验室页面可以逐项预览效果。

能力四：屏幕优化的字形细节

价值：高 x 高度让小字号混排文本更醒目；针对 12px 以下的栅格化做了笔画位置取舍，在高分辨率屏幕上保持锐利；覆盖拉丁、西里尔、希腊字符集，多语言产品无需换字体。

怎么用：正文默认 400 字重 + 1.5 倍行高即可直接获得良好可读性；多语言站点无需为俄语、希腊语单独配字体文件。下面这张图展示了 Inter 的完整字符集观感：

实战场景：两条落地路径

场景一：Web 项目整体换装

1. 复制docs/font-files/与inter.css到项目静态目录（如static/fonts/）。
2. 全局样式引入上面那段带@supports回退的声明，新浏览器走可变字体，旧浏览器自动落到静态Inter。
3. 检查现有font-weight: 700/800/900类选择器，可变字体下全部生效，无需追加@font-face。
4. 用 Lighthouse 或网络面板确认字体请求数：从原来 5~9 个文件降到 1~2 个。

场景二：数据密集型后台 / 仪表盘

1. 表格和数值列统一加上font-feature-settings: "tnum"，数字等宽后列不再抖动。
2. 涉及序列号、验证码、代码展示的字段叠加"zero"，用斜杠零消歧。
3. 正文保持Inter，48px 以上的 KPI 大数字切换InterDisplay，大字号下观感更紧实。
4. 若业务需要开放顶数字或单层 a 等产品风格，从 cv01~cv14 里按需开启，不用重绘字形。

调优与避坑：性能、兼容与高频问题

性能调优点：

• 现代浏览器只发可变字体，静态字重仅作为回退，不要两者全量引入。
• 优先 WOFF2 而非 TTF，浏览器端压缩率显著更高。
• inter.css已内置font-display: swap，文字先以回退字体呈现再替换，不会白屏等待。
• 多语言站点按需做字符子集（subsetting），只打包项目实际用到的语言区块。

高频问题速查：

延伸路线

• 字体实验室：docs/lab/ 提供在线字形检视与变体切换工具，配合同目录的 docs/samples/ 可看整页排版样例。
• 字形明细：docs/_data/glyphinfo.json 记录每个字形的度量信息，适合做脚本化分析。
• 构建工具链：misc/tools/ 下有一整套 Python 工具（字体子集化、字距处理、特性检查等），想改字体或做衍生字体时从这里入手。
• 同类对比：Roboto、SF Pro、Akkurat 风格相近，可作为选型对照；Inter 的差异化在高 x 高度 + 可变字体 + 完整开源授权。

Inter 把"屏幕字体该做什么"想得很透：高 x 高度、可变字重、双光学尺寸、实用 OpenType 特性，且全部开放授权。现在把docs/font-files/拷进你的项目，让下一个页面的文字读起来更专业。

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