Inter 变量字体一个文件把 9 种字重带进你的网页【免费下载链接】interThe Inter font family项目地址: https://gitcode.com/gh_mirrors/in/interInter 是一款为屏幕显示设计的无衬线字体包含 Thin 到 Black 共 9 个字重和完整斜体。变量字体版本单个文件即可交付opsz 轴能按字号调整字形适合网页 UI 与文档站。适合谁小字号界面文本是它的用武之地Inter 属于几何新无衬线geometric neo-grotesque风格上接近 Roboto、San Francisco但它最有辨识度的设计是偏大的 x 高度——也就是小写字母相对字体的比例。这背后是它的出身Inter 最初就是为计算机屏幕做的在 13~16px 的正文字号下x 高度大一点字母轮廓更清楚长段落阅读时的视觉负担更小。仓库里同时提供了一组大字号变体 Inter Display。两者的区别正体现在 x 高度上从对比图能看到文本版 x 高度更高Display 版在同样大写高度下 x 高度略低大字更紧凑。所以适用场景比较明确Web 产品界面、仪表盘、文档站这类以小字号正文为主的场景选标准文本版如果页面里大标题很多直接用 Display 版或者靠变量文件的 opsz 轴切换下文会讲。从零到跑起来网页引入的最短路径最省事的方式是自托管。把仓库克隆下来取 docs/font-files/ 里编译好的字体文件和 docs/inter.cssgit clone https://gitcode.com/gh_mirrors/in/inter两者放到你的 web 服务器上页面里引用这份 CSS 后样式这样写:root { font-family: Inter, sans-serif; } supports (font-variation-settings: normal) { :root { font-family: InterVariable, sans-serif; } }这正是 docs/inter.css 文件头部注释里给出的用法不支持变量字体的旧浏览器回退到 9 个字重的静态文件现代浏览器只加载 InterVariable 一份字重 100~900 全部覆盖请求字重变化时不会再触发新文件下载。字体显示策略它也替你处理了CSS 里每处都是font-display: swap正文会先用后备字体渲染不会白屏等待。真实项目里怎么调opsz 光学尺寸与斜线零InterVariable 有三个轴wght字重、ital斜体、opsz光学尺寸。第三个最容易被人忽略。所谓光学尺寸是指同一款字体在大字号和小字号下应该用不同的细节大字号需要相对更细的笔画和更小的内部空间才显得协调opsz 就是干这件事的轴。写进 CSS 很简单h1 { font-variation-settings: opsz 40; }这样标题就固定用大字号形态不必再同时维护 Inter 和 InterDisplay 两个字体名。其余 OpenType 功能也有内置各功能的源码按文件拆分放在 src/features/ 目录。日常用得上的两个zero把数字 0 换成斜线零在代码、版本号、ID 里区分数字 0 和字母 otnum是等宽数字每个数字宽度相同表格里的数字列自然对齐。像calt上下文标点替代、liga连字这类默认开启的功能正常排版下不用操心。能不能商用SIL 开源字体许可证的边界Inter 采用 SIL Open Font License 1.1完整条款见 LICENSE.txt。对使用者来说可以归纳为四句商用没问题随产品使用、嵌入软件、随服务分发都可以用它做的文档不受任何限制可以修改并做衍生字体但衍生作品必须继续用 OFL 发布不能换成别的许可证字体本身不能当独立商品出售想卖衍生版本仓库说明建议先联系作者Inter 是保留字体名衍生作品不能沿用这个名字。对绝大多数项目——官网、App、设计系统——这些条款不构成任何额外成本。什么时候该考虑换一家有两种情况值得重新评估。第一种你的界面以中文、日文或韩文为主。Inter 的字符覆盖集中在拉丁文、西里尔文、希腊文和部分欧洲语言CJK 字符会回退到系统字体这种情况下更稳的做法是从一开始就按Inter 管拉丁字母 CJK 字体管汉字组合设计并在font-family里定好回退顺序。第二种你需要字宽变化。Inter 只有 wght、opsz、ital 三个轴没有 condensed 或 expanded如果密集数据面板确实在横向空间上捉襟见肘可以去看带宽度轴的字体家族。如果你的产品是小字号为主的 Web UI又不想维护一堆字重文件直接克隆仓库、把 docs/font-files/ 挂到服务器上然后在 14px 正文和 32px 标题两个尺寸下验证效果就是最短的一条验证路径。【免费下载链接】interThe Inter font family项目地址: https://gitcode.com/gh_mirrors/in/inter创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考