Inter 字体免费使用指南变量字体接入与商用要点一次讲清【免费下载链接】interThe Inter font family项目地址: https://gitcode.com/gh_mirrors/in/interInter 字体是一款为计算机屏幕设计的开源无衬线字体家族内置变量字体与丰富的 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需要参与构建或查看源文件npmnpm install inter-ui前端项目直接引用Homebrewbrew install font-intermacOS 本地安装发行版包apt install fonts-interLinux 系统安装各渠道的版本更新节奏不同对版本敏感的场景建议直接从仓库docs/font-files/目录取最新的 woff2 或 ttf 文件。上图是这套字体的基本面貌9 个字重Thin 到 Black加对应斜体外加 Display 光学尺寸版本共 36 个静态文件和 2 个变量字体文件。文件到手后网页接入其实只需要两步。怎么把 Inter 变量字体接入网页第一步HTML 引入 inter.css把 docs/inter.css 和docs/font-files/目录放到你的静态资源目录下然后在页面头部引入link relpreconnect href/fonts/ link relstylesheet 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 和字母 otnum表格数字数字列纵向对齐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: swapinter.css 已默认配置文字先用系统字体显示字体就绪后替换避免空白等待。按语言子集化Inter 覆盖拉丁、西里尔、希腊等书写系统如果站点只服务单一语言可以只保留对应子集进一步缩小体积。preconnect 提前握手字体放在独立域名或 CDN 时用 preconnect 省掉 DNS 和 TLS 往返。上图是 Inter 在多语言环境下的实际表现同一套字形在不同语言里保持相近的视觉节奏——做子集化之前先确认目标语言都在覆盖范围内。小结Inter 字体在屏幕可读性、变量字体支持和商用授权三方面都没有明显短板接入成本也很低。对于以界面文字为主的产品它是个可以放心选的默认答案。想参与构建或定制字形可以参考 CONTRIBUTING.md 里的说明。【免费下载链接】interThe Inter font family项目地址: https://gitcode.com/gh_mirrors/in/inter创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考