Inter 字体使用指南从免费安装到变量字体上手的完整教程【免费下载链接】interThe Inter font family项目地址: https://gitcode.com/gh_mirrors/in/interInter 是一款专为计算机屏幕设计的免费开源无衬线字体采用 SIL OFL 1.1 许可证完全免费且可商用。它最大的特点是高 x 高度小写字母的平均高度让小字号文字更清楚同时它还是变量字体一个文件就能覆盖 100~900 的全部字重。无论你是前端开发者还是 UI 设计师跟着本文走一遍从安装到上生产环境都不算难事。三种方式获取 Inter 字体文件Inter 的源码托管在公开仓库仓库里的 docs/font-files/ 目录就是现成的字体文件woff2 格式网页端压缩率更高的字体格式直接拷走即可。更省事的渠道# 方式一克隆仓库字体文件在 docs/font-files/ 里 git clone https://gitcode.com/gh_mirrors/in/inter # 方式二npm 包 npm install inter-ui # 方式三macOS 用 Homebrew brew install font-inter除变量字体外静态版本提供 9 种字重100~900加对应斜体按字重命名、逐一分发方便给老旧渲染环境兜底。仓库根目录还放了一张多语言文字样本直观展示它的实际效果网页中集成 Inter 只需三步拿到文件后网页集成其实就三步引入 CSS、声明字体栈、给不支持变量字体的老浏览器留后路。!-- 第一步引入 inter.css它已经声明好全部 font-face -- link relstylesheet href/path/to/inter/inter.css:root { font-family: Inter, sans-serif; } /* 回退到静态字体 */ supports (font-variation-settings: normal) { :root { font-family: InterVariable, sans-serif; } /* 支持则用变量字体 */ }font-display: swap已经在 CSS 里写好了新字体加载完成前会先显示系统字体不会出现页面长时间看不见文字的尴尬。docs/inter.css 是可直接使用的完整配置照着抄就行。变量字体一个文件搞定 9 种字重变量字体variable font把多个字重收进同一个文件通过轴参数取值而不是每换一种字重就加载一个新文件。Inter 有两个常用轴p { font-variation-settings: wght 400, opsz 16; } /* 正文常规字重 */ h1 { font-variation-settings: wght 700, opsz 32; } /* 大标题加粗 */wght是字重轴100 到 900 之间任意取值比如 450 这种中间态静态字体给不了你。opsz是光学尺寸轴字号越大字形比例自动微调避免大标题显得纤细。Inter 的 Display 子族专门优化了大字号场景对比一下就很明显——右边 Display 版的 x 高度明显更高正文走文本版、大标题走 Display 版两个子族都包在这一个仓库里。让排版细节更讲究的 OpenType 功能字体装好只是开始Inter 内置了一批 OpenType 功能排版层面的自动替换规则按功能开关启用斜线零数字 0 中间加一道斜线和字母 o 不再混淆表格数字每位数字等宽账单、表格列对齐更整齐上下文标点引号、括号会根据相邻字形的形状自动换形态body { font-feature-settings: calt 1, zero 1; } /* 上下文标点 斜线零 */ .table { font-feature-settings: tnum 1; } /* 数字列用等宽数字 */另外 src/features/ 下还有 14 个 CV 选项个性化替换如 1 尾造型、6 的写法设计师可以在细节上再抠一把。免费商用之前先看清 SIL OFL 许可证Inter 采用 SIL Open Font License 1.1这是字体圈最宽松的开源许可证之一。LICENSE.txt 里几条和商用直接相关的规则可以在商业产品里免费使用、修改、随软件打包分发和嵌入不可以把字体文件本体包括你的改版单独拿出来出售不可以衍生字体继续使用 Inter 这个名字它是保留字体名用一句话概括字体随产品走没问题字体本身就是产品不行。常见问题 FAQQ我的产品要收费能用 Inter 吗A可以。SIL OFL 明确允许免费商用嵌入、打包、随软件分发都不需要付钱唯一不能做的是单独售卖字体文件。QGoogle Fonts 上的 Inter 可以用吗A能用但不推荐那个版本较旧且不含斜体。优先用本仓库 releases 或上面的安装渠道。Q我的项目里有些环境不支持变量字体怎么办A静态字体就是为此准备的。inter.css里已写好回退方案老浏览器自动加载对应字重的 woff2 文件无需额外处理。Q用 Inter 需要做些什么合规动作A基本没有。保留许可证说明、不要把 Inter 用于衍生字体命名、不单独售卖字体本体这三条做到即可。开始动手部署InterVariable.woff2加一份inter.css给表格数字打开tnum再对照许可证核对一遍商用场景——三件事做完Inter 就可以稳稳上生产环境了。【免费下载链接】interThe Inter font family项目地址: https://gitcode.com/gh_mirrors/in/inter创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/11/4 7:02:45 · 阅读 1.2k Inter 字体使用指南：从免费安装到变量字体上手的完整教程
Inter 字体使用指南从免费安装到变量字体上手的完整教程【免费下载链接】interThe Inter font family项目地址: https://gitcode.com/gh_mirrors/in/interInter 是一款专为计算机屏幕设计的免费开源无衬线字体采用 SIL OFL 1.1 许可证完全免费且可商用。它最大的特点是高 x 高度小写字母的平均高度让小字号文字更清楚同时它还是变量字体一个文件就能覆盖 100~900 的全部字重。无论你是前端开发者还是 UI 设计师跟着本文走一遍从安装到上生产环境都不算难事。三种方式获取 Inter 字体文件Inter 的源码托管在公开仓库仓库里的 docs/font-files/ 目录就是现成的字体文件woff2 格式网页端压缩率更高的字体格式直接拷走即可。更省事的渠道# 方式一克隆仓库字体文件在 docs/font-files/ 里 git clone https://gitcode.com/gh_mirrors/in/inter # 方式二npm 包 npm install inter-ui # 方式三macOS 用 Homebrew brew install font-inter除变量字体外静态版本提供 9 种字重100~900加对应斜体按字重命名、逐一分发方便给老旧渲染环境兜底。仓库根目录还放了一张多语言文字样本直观展示它的实际效果网页中集成 Inter 只需三步拿到文件后网页集成其实就三步引入 CSS、声明字体栈、给不支持变量字体的老浏览器留后路。!-- 第一步引入 inter.css它已经声明好全部 font-face -- link relstylesheet href/path/to/inter/inter.css:root { font-family: Inter, sans-serif; } /* 回退到静态字体 */ supports (font-variation-settings: normal) { :root { font-family: InterVariable, sans-serif; } /* 支持则用变量字体 */ }font-display: swap已经在 CSS 里写好了新字体加载完成前会先显示系统字体不会出现页面长时间看不见文字的尴尬。docs/inter.css 是可直接使用的完整配置照着抄就行。变量字体一个文件搞定 9 种字重变量字体variable font把多个字重收进同一个文件通过轴参数取值而不是每换一种字重就加载一个新文件。Inter 有两个常用轴p { font-variation-settings: wght 400, opsz 16; } /* 正文常规字重 */ h1 { font-variation-settings: wght 700, opsz 32; } /* 大标题加粗 */wght是字重轴100 到 900 之间任意取值比如 450 这种中间态静态字体给不了你。opsz是光学尺寸轴字号越大字形比例自动微调避免大标题显得纤细。Inter 的 Display 子族专门优化了大字号场景对比一下就很明显——右边 Display 版的 x 高度明显更高正文走文本版、大标题走 Display 版两个子族都包在这一个仓库里。让排版细节更讲究的 OpenType 功能字体装好只是开始Inter 内置了一批 OpenType 功能排版层面的自动替换规则按功能开关启用斜线零数字 0 中间加一道斜线和字母 o 不再混淆表格数字每位数字等宽账单、表格列对齐更整齐上下文标点引号、括号会根据相邻字形的形状自动换形态body { font-feature-settings: calt 1, zero 1; } /* 上下文标点 斜线零 */ .table { font-feature-settings: tnum 1; } /* 数字列用等宽数字 */另外 src/features/ 下还有 14 个 CV 选项个性化替换如 1 尾造型、6 的写法设计师可以在细节上再抠一把。免费商用之前先看清 SIL OFL 许可证Inter 采用 SIL Open Font License 1.1这是字体圈最宽松的开源许可证之一。LICENSE.txt 里几条和商用直接相关的规则可以在商业产品里免费使用、修改、随软件打包分发和嵌入不可以把字体文件本体包括你的改版单独拿出来出售不可以衍生字体继续使用 Inter 这个名字它是保留字体名用一句话概括字体随产品走没问题字体本身就是产品不行。常见问题 FAQQ我的产品要收费能用 Inter 吗A可以。SIL OFL 明确允许免费商用嵌入、打包、随软件分发都不需要付钱唯一不能做的是单独售卖字体文件。QGoogle Fonts 上的 Inter 可以用吗A能用但不推荐那个版本较旧且不含斜体。优先用本仓库 releases 或上面的安装渠道。Q我的项目里有些环境不支持变量字体怎么办A静态字体就是为此准备的。inter.css里已写好回退方案老浏览器自动加载对应字重的 woff2 文件无需额外处理。Q用 Inter 需要做些什么合规动作A基本没有。保留许可证说明、不要把 Inter 用于衍生字体命名、不单独售卖字体本体这三条做到即可。开始动手部署InterVariable.woff2加一份inter.css给表格数字打开tnum再对照许可证核对一遍商用场景——三件事做完Inter 就可以稳稳上生产环境了。【免费下载链接】interThe Inter font family项目地址: https://gitcode.com/gh_mirrors/in/inter创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考