接入 Inter 变量字体两行 CSS 从落地到生产级排版【免费下载链接】interThe Inter font family项目地址: https://gitcode.com/gh_mirrors/in/inter后台系统、数据产品里大量的正文停留在 13–16px而多数系统字体在小字号下 x 高度偏矮、间距局促文字显得发灰发糊。Inter 就是为这种屏幕小字设计的几何无衬线字体它是可变字体字重 100–900 全区间连续可调还带一条 14–32 的光学尺寸轴采用 SIL OFL 1.1 许可证LICENSE.txt可免费商用、嵌入产品、随软件分发唯一限制是不能把字体本身当商品出售。网页接入两行 CSS 跑通 Inter仓库里的 docs/inter.css 一次性声明了三组字族InterVariable可变版单文件覆盖全部字重、Inter小光学尺寸的静态文件和InterDisplay大光学尺寸的静态文件。文件头部注释里就写了标准用法HTML 头部引一行 stylesheetCSS 里做静态打底 变量升级link relpreconnect hrefhttps://your-font-file-host/ link relstylesheet hrefhttps://your-font-file-host/inter.css:root { font-family: Inter, sans-serif; } supports (font-variation-settings: normal) { :root { font-family: Inter var, sans-serif; } }supports负责探测浏览器是否支持变量字体旧浏览器落到静态文件新浏览器自动切换到可变版。上线后你会得到单个约 340KB 的 woff2 文件docs/font-files/InterVariable.woff2font-weight从 100 到 900 任意数值都由它插值渲染替代了传统每个字重一个文件的 18 次请求。玩转变量轴wght 之外的 opsz 光学尺寸Inter 与一般变量字体的区别在于多了一条opsz轴14 对应 text、32 对应 display。同一字母 X 在两种光学尺寸下的差异下图看得很清楚左侧是文本版右侧是 Display 版注意橙色基准线的位置——Display 版的小写字母明显更高、笔画对比更强大字号下更扎实CSS 里按元素声明即可标题拉满显示优化正文保持文本优化这正是字体设计师预设的排版分层h1 { font-variation-settings: wght 700, opsz 32; } p { font-variation-settings: wght 400, opsz 14; }做完这一步同一份字体文件在不同字号下自动切换渲染策略你不用再手动在两个字族之间挑选。打开 OpenType 特性斜线零与表格数字仓库 src/features/ 目录放着完整的特性定义对开发者最实用的是三个。zero把普通 0 换成斜线零所有字形变体都有对应替换见 zero.fea代码、序列号场景必开tnum让数字等宽表格里的列数字能逐行对齐calt上下文替代会根据周边字形自动挑选标点形状默认开启。仓库还内置了实时切换的演示页 docs/lab/每个特性都能肉眼对比开关效果。code, .serial { font-feature-settings: zero; } .table-cell { font-feature-settings: tnum; }真实场景与适用边界场景你在做一个 B 端 SaaS 后台正文 14px、数据表格密集、有代码块、有大标题。Inter 的覆盖正好是这个区间——正文wght 400配opsz 14数字列开tnum代码区开zero顶部标题wght 700配opsz 32。如果还要显示西里尔、希腊文字体已内置支持清单见 docs/_data/languages.yml不用另配字体。多语言并排渲染的实际效果见下图四种语言正文节奏一致重点看第一行数字与符号区标点和货币符号的字形都很克制两个明确的坑一是别用 Google Fonts 上的版本README 明确说它过期且没有斜体字体文件应自行托管本仓库的产物二是opsz别乱拉满opsz 32是给大字号用的套在 14px 正文上笔画对比会显得发飘。反过来讲Inter 的定位是拉丁、希腊、西里尔文字的屏幕小字如果你的产品主语言是中文、阿拉伯文或需要竖排排版它只能当辅助字体不是正解。三句话带走接入照抄 docs/inter.css 的supports写法可变版加静态兜底一次到位。代码区开zero、表格数字列开tnum两行font-feature-settings的回报远超换字体本身。SIL OFL 1.1 允许免费商用和随产品分发唯一红线是别出售 Inter 本身衍生字体也别沿用保留名称 Inter。动手前建议先到 docs/lab/ 把每个特性开关拨一遍比再读三页文档更直观。【免费下载链接】interThe Inter font family项目地址: https://gitcode.com/gh_mirrors/in/inter创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
