Inter 开源字体入门指南可变字体 双光学尺寸3步集成到你的项目【免费下载链接】interThe Inter font family项目地址: https://gitcode.com/gh_mirrors/in/interInter 是一款由 Rasmus Andersson 设计、专为计算机屏幕优化的开源字体SIL Open Font License 1.1 授权。高 x 高度提升小字号可读性可变字体技术让一个文件覆盖 100~900 全部字重。读完本文你能在网页项目里集成 Inter 可变字体并学会用 OpenType 特性解决数字排版问题。项目画像一支为屏幕而生的字体家族维度说明定位几何新哥特风格geometric neo-grotesque屏幕无衬线字体风格接近 Roboto、Apple San Francisco当前版本4.1见 version.txt源文件 2900 个字形含完整斜体系列授权SIL Open Font License 1.1可免费商用不能单独售卖字体本身或其衍生版技术形态可变字体 静态字重双轨分发Web 端以 WOFF2 为主桌面端提供 TTF语言覆盖拉丁文、西里尔文、希腊文等上百种语言清单见 docs/_data/languages.yml它在同类项目里的位置系统自带字体如 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~900Inter静态字重小光学尺寸兼容旧浏览器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显示版两个子家族而不是让你一个字体硬扛所有字号。怎么用正文区用Inter40px 以上的大标题、海报式排版切换为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 项目整体换装复制docs/font-files/与inter.css到项目静态目录如static/fonts/。全局样式引入上面那段带supports回退的声明新浏览器走可变字体旧浏览器自动落到静态Inter。检查现有font-weight: 700/800/900类选择器可变字体下全部生效无需追加font-face。用 Lighthouse 或网络面板确认字体请求数从原来 5~9 个文件降到 1~2 个。场景二数据密集型后台 / 仪表盘表格和数值列统一加上font-feature-settings: tnum数字等宽后列不再抖动。涉及序列号、验证码、代码展示的字段叠加zero用斜杠零消歧。正文保持Inter48px 以上的 KPI 大数字切换InterDisplay大字号下观感更紧实。若业务需要开放顶数字或单层 a 等产品风格从 cv01~cv14 里按需开启不用重绘字形。调优与避坑性能、兼容与高频问题性能调优点现代浏览器只发可变字体静态字重仅作为回退不要两者全量引入。优先 WOFF2 而非 TTF浏览器端压缩率显著更高。inter.css已内置font-display: swap文字先以回退字体呈现再替换不会白屏等待。多语言站点按需做字符子集subsetting只打包项目实际用到的语言区块。高频问题速查现象原因解法font-weight只有离散档浏览器未启用可变字体或加载的是静态文件确认supports分支生效改用InterVariable.woff2大标题显得松散笨重用了文本版光学尺寸大字号区域切换到InterDisplay桌面软件里搜不到 Inter只安装了 WOFF2Web 专用格式安装InterVariable.ttf等 TTF 文件表格数字列宽不齐数字默认按比例宽度排布加font-feature-settings: tnum想转售打包字体被拒OFL 禁止单独售卖字体及衍生版免费商用没问题商业售卖字体需另行沟通授权延伸路线字体实验室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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
