Inter 开源字体：从选型、网页集成到商用合规的全流程实践-育师

Inter 开源字体：从选型、网页集成到商用合规的全流程实践

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

设计评审里被问"为什么选这款字体"时，答案往往就藏在它的 x 高度里。Inter 是一款为计算机屏幕打造的几何无衬线开源字体，内置变量字体与 OpenType 特性，采用 SIL 开源字体许可证（OFL 1.1），可免费商用。本文面向需要为产品选定默认字体并负责落地的 UI 设计师与前端工程师，覆盖选型理由、安装集成、进阶调优与合规边界。

为什么选它：三个关键设计决策

Inter 的差异化不在"好看"，而在三个对屏幕显示有针对性的工程决策：

高 x 高度 + opsz 光学尺寸轴。Inter 的 x 高度明显高于多数同类 grotesk，小字号下混排大小写的识别度更好。更进一步，它把"文本版/大字号版"做成了变量轴而不是两套字体：opsz 在 14（text）到 32（display）之间连续变化，14 时 x 高度为 1118 UPM、32 时收缩到 1056 UPM。对使用者的意义：正文和大标题可以共用同一套字，字号变大时字形自动"变高、变舒展"，不需要切换字体文件。
真正的变量字体。单个InterVariable.woff2覆盖 wght 100–900 全部九档字重；传统分发方式下这对应 18 个静态文件（再加 Display 子族又是 18 个，仓库docs/font-files/里共 36 个）。对使用者的意义：字体请求数量从"每个字重一个文件"降到 1 个，字重还能取 100–900 之间的任意值。
开箱即用的 OpenType 特性。上下文替代字（calt，根据相邻字形自动调整标点形态）、斜线零（zero）、等宽数字（tnum）、连字，以及ss02/ss04这类消除歧义的样式集都内置。特性源码按文件组织在 src/features/，例如zero.fea把zero替换为带斜线的zero.slash。

安装与最小网页集成

获取方式按场景三选一：

拉取源码仓库（含字体工程、构建工具与文档），查看构建流程时使用：

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

前端项目引入字体文件：

npm install inter-ui

macOS 本机安装为系统字体（注意第三方分发的版本可能滞后）：

brew install font-inter

注意：仓库src/下是 Glyphs 源文件，日常使用应拿发布版的预编译字体；docs/font-files/ 内置的 woff2 可以直接给网页用。

网页最小集成只需要两步：在 HTML 头部引入字体样式表，再声明字体族。下面这段写法用@supports检测变量字体支持，现代浏览器加载变量字体，老浏览器回退到静态字体：

<link rel="preconnect" href="https://your-font-file-host/"> <link rel="stylesheet" href="https://your-font-file-host/inter.css">

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

仓库中的 docs/inter.css 是完整的 font-face 参考：它声明了InterVariable（变量字体，font-weight: 100 900）、Inter与InterDisplay两个静态族，每个字体文件都带font-display: swap。

变量字体与 OpenType 特性的进阶配置

opsz 光学尺寸轴：让一套字体同时服务正文与大标题

场景：产品里正文 14–16px、大标题 32px 以上，传统做法要备两套字体（text/display）。Inter 用 opsz 轴解决。

配置：

@supports (font-variation-settings: normal) { :root { font-family: 'Inter var', sans-serif; } h1 { font-variation-settings: 'wght' 700, 'opsz' 32; } /* 大标题用 display 光型 */ p { font-variation-settings: 'wght' 400, 'opsz' 14; } /* 正文用 text 光型 */ }

效果：同一文件内字重与光型连续可调；opsz 取中间值（如 24）时，x 高度与字面宽度在 1118/1056 UPM 之间平滑插值，排版层次更细腻，且不需要多加载任何文件。

zero 与 tnum：斜线零和等宽数字

场景：代码查看器、订单号、金额表格里，0与o混淆、列数字对不齐是高频投诉点。

配置（特性定义可对照src/features/下的zero.fea、calt.fea）：

pre, .mono { font-feature-settings: "zero"; /* 数字 0 换成带斜线字形，与字母 o 区分 */ } table.amounts { font-feature-settings: "tnum"; /* 等宽数字，表格纵向对齐 */ }

效果：一行声明即可消除歧义；calt默认开启，标点会跟随相邻字形的开口形状自动切换，多数页面无需额外配置。

字体加载策略：一个 woff2 文件 + swap

场景：首屏 LCP 被字体阻塞。配置要点其实就在docs/inter.css里已经写好的两条规则：

变量字体一个 woff2 覆盖全部字重，请求数从"每字重一个"降为 1；
font-display: swap让文本先用系统字体渲染、字体就绪后替换，避免白屏等待。

对性能敏感的项目还可以只保留实际用到的字重区间做子集化——这一步省下来的加载时间，用户是感知得到的。

多语言覆盖：拉丁与西里尔

场景：产品面向欧洲多语言市场。Inter 内置完整拉丁字母（含大量组合变音符）与西里尔字母，四种语言并排时视觉节奏一致：

/* 西里尔与拉丁均被覆盖，无需按语言切换字族 */ :lang(cy), :lang(da), :lang(de), :lang(cs) { font-family: 'Inter', sans-serif; }

效果见下图：英语、丹麦语、德语、捷克语同一段文本的正文与标题排版，间距与字面密度保持一致。注意 Inter 的定位是拉丁/西里尔字体，CJK 文本仍需系统字体兜底。

SIL 开源字体许可证的商用边界与仓库结构

Inter 采用标准 SIL Open Font License 1.1，完整文本见 LICENSE.txt：

✅可以做

在产品/服务中免费商用、嵌入、随软件打包分发
修改字体并分发衍生版本
用于文档、品牌、界面等一切用途

❌不能做

把 Inter 字体文件本身（或衍生版）单独作为商品出售
在衍生字体中使用 "Inter" 这个保留字体名（Reserved Font Name）

关键路径速查：

docs/font-files/InterVariable.woff2 # 变量字体（网页首选） docs/inter.css # font-face 规则与使用示例 src/features/ # OpenType 特性源码（zero.fea、calt.fea 等） src/Inter-Roman.glyphspackage/ # 正文字体源文件 LICENSE.txt # SIL OFL 1.1 许可证

三点注意事项：