Outfit字体：免费开源 9 字重，从安装到可变字重指南

Outfit字体：免费开源 9 字重，从安装到可变字重指南

【免费下载链接】Outfit-FontsThe most on-brand typeface项目地址: https://gitcode.com/gh_mirrors/ou/Outfit-Fonts

做品牌官网时，标题、正文、悬停状态往往要分别配字体，一套字备好几个文件很常见。Outfit字体 是几何无衬线体，Thin(100) 到 Black(900) 共 9 个字重一次配齐，还带 wght 轴可变字体，OFL 许可可商用，整个仓库可直接克隆到本地。

一套字重，覆盖正文到海报

Outfit字体 是品牌自动化公司 outfit.io 的官方字库，设计源自其连字标志：几何骨架、圆形端口、无衬线，小字号下依然清晰。仓库的 fonts/ 目录按用途分好类：otf/给 macOS 设计工具，ttf/是 Windows 与 Linux 通用格式，webfonts/是网页端 woff2，variable/是可变字体，按需取对应文件夹即可。

Outfit 字体 9 种字重与官方标志，从细到黑。

📦 从克隆到安装，三步生效

git clone https://gitcode.com/gh_mirrors/ou/Outfit-Fonts

克隆完成后，按你的环境走三步：

1. macOS：双击fonts/otf/里任意文件，加入字体册；
2. Windows：在fonts/ttf/中右键文件，选"安装"；
3. 网页项目：把fonts/webfonts/拷进项目，用 CSS 引用，下一节给现成写法。

日常使用 Regular 与 Bold 两个字重就够用，不必一次装满 9 个；想自行重新构建字体，步骤在 Makefile 里有说明。

网页端引入 Outfit字体 的两种写法

静态写法：按字重逐条声明，浏览器按 font-weight 匹配。

@font-face { font-family: 'Outfit'; src: url('fonts/webfonts/Outfit-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } body { font-family: 'Outfit', sans-serif; } h1 { font-weight: 700; }

注意 h1 用到 700 时，需要再为 Outfit-Bold.woff2 声明一条 @font-face，否则浏览器会模拟加粗。不想维护多段声明的，直接用下节的可变字体。

⚙️ 可变字体：一个文件覆盖 100 到 900

可变字体是 Outfit字体 里最省心的部分，fonts/variable/Outfit[wght].woff2打开了 wght 轴：

@font-face { font-family: 'Outfit Variable'; src: url('fonts/variable/Outfit[wght].woff2') format('woff2'); font-weight: 100 900; } .nav-link { font-variation-settings: 'wght' 400; transition: font-variation-settings .3s; } .nav-link:hover { font-variation-settings: 'wght' 700; }

悬停加粗是纯 CSS 过渡，不产生额外请求。旧浏览器不支持时可加 @supports，回退到上一节的静态 woff2。

桌面设计与品牌规范

在 Figma 或 Adobe 软件中装好 OTF 后，9 个字重直接可用。从官方样张看，它的笔画变化是线性的：加粗不糊、变细不断，适合 logo 组合、大标题这类强品牌感场景。

同一组字符在 bold 与 thin 下的笔画变化。

字重规范简化成三档即可：主标题 Bold(700)，小标题 Medium(500)，正文 Regular(400)，行内强调用 SemiBold(600)。

❓ 三个高频问题

• 网页端某个字重不生效？静态字体下每个 font-weight 都要对应一条 @font-face；改用可变字体则天然连续。
• 哪种格式体积最小？webfonts/的 woff2 比同字重 otf、ttf 都小，可变字体则以单文件覆盖全字重，性价比最高。
• 可以商用吗？OFL 1.1 许可允许免费使用与修改，条款细节见 OFL.txt。

现在就可以做的三件事

1. 执行上面的克隆命令拿到仓库，先装 Regular 和 Bold；
2. 把主项目的默认 sans-serif 换成font-family: 'Outfit', sans-serif；
3. 在导航这样的小组件里试一下可变字体的悬停加粗效果。

【免费下载链接】Outfit-FontsThe most on-brand typeface项目地址: https://gitcode.com/gh_mirrors/ou/Outfit-Fonts