企业官网建设流程全解析

Outfit 免费开源字体完整指南：一次拿到 9 个字重、可变字体与 WOFF2 网页格式

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

从一张"字重不对版"的设计稿说起

给品牌做官网时，你大概率遇到过这种麻烦：标题用了一个粗黑体，正文是另一个细体，图标旁的标注又是第三套——三种字来自三个来源，凑在一起怎么看都不是一家人。更糟的是，想统一换字重来强调某句话，却发现字体包里根本没人做过那个字重。

Outfit 字体就是为这种"品牌视觉不统一"的问题而生的：它是品牌自动化公司 outfit.io 发布的官方几何无衬线字体家族，OFL 开源免费，从 Thin(100) 到 Black(900) 共9 个字重一次给全，还附赠可变字体和网页专用的 WOFF2 格式。

它是什么，给谁用

一句话定位：Outfit 是一套面向品牌视觉的免费开源几何无衬线字体家族，适合设计师、前端开发和品牌团队——你用它做 Logo 和主视觉，前端用它做网页正文，两边天然就是同一套语言。

项目结构非常直白，字体文件按用途分好了目录：

fonts/ ├── otf/ # macOS 设计软件常用格式 ├── ttf/ # Windows/Linux 通用格式 ├── variable/ # 可变字体（wght 字重轴） └── webfonts/ # 网页开发推荐的 WOFF2

源文件在 sources/Outfit.glyphs，构建配置见 sources/config.yaml，构建脚本在 Makefile。

一条线跑通：克隆、选格式、三行 CSS 上线

整个上手过程就三步，一条线走下来：

先克隆仓库：

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

然后按你的场景挑格式，别贪多：

最后加几行 CSS 就能跑（以网页为例，只引正文最必需的 Regular 和标题常用的 Bold）：

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

到这里，你的页面和 Figma 里已经是同一张脸了。

核心能力拆解

🎯 9 个字重一大家族，粗细永远"对得上"

能力：Thin(100) 到 Black(900) 共 9 档，全部由同一位设计师在同一套骨架上调整，不是后期加粗糊出来的。

带来什么：你放大缩小、加粗变细，视觉气质不会跑偏——同一品牌里"安静"和"响亮"的文案都能装得下。

怎么用：日常只需要记住三档：正文 Regular(400)、副标题 Medium(500)、主标题 Bold(700)。

📐 可变字体：一个字重轴，滑到哪都行

能力：fonts/variable/里的Outfit[wght].ttf/.woff2带wght字重轴，100 到 900 连续可调，不限于那 9 个整数档位。

带来什么：一个文件替代整包字体，文件体积和请求数都省了；还能做"悬停加粗"这类交互细节。

怎么用：注意一个高频坑——CSS 里可变字体的 format 写法不是woff2-variations，就是普通的woff2：

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

🗂️ 四种格式全齐，每个平台都有"原生"选项

能力：OTF、TTF、可变 TTF/WOFF2、9 份静态 WOFF2，仓库里一次给足。

带来什么：不用自己装工具转格式。很多开源字体只给 TTF，做网页还得再压一次 WOFF2，这里直接省掉。

怎么用：按上面"选格式"那张表对号入座即可；网页端优先 WOFF2，桌面端按系统习惯选 OTF 或 TTF。

🔧 开源到"可重建"：源文件和构建流程都在仓库里

能力：仓库不是只放结果，sources/Outfit.glyphs源文件、make build构建、make test（FontBakery 质检）、make proof（生成 HTML 样张）整条流水线都是开源的。

带来什么：想自查质量、或基于它微调一套"自家变体"，门槛很低。

怎么用：本地装好 Python 环境后，make build会重新生成fonts/下所有文件，make proof生成网页样张方便逐字核对。

场景示范：字重怎么选，一张表定下来

做品牌规范时最容易"凭感觉"的环节，直接给一套可抄的默认值：

格式选择同理，记住一条主线：网页 WOFF2、macOS 设计 OTF、Windows TTF、要动态字重用可变字体。

避坑与进阶

• 可变字体 format 写错会静默失败：format('woff2-variations')是常见错误写法，正确就是format('woff2')；写错时浏览器会退回系统字体，且不报任何错，排查起来很费事。
• 别靠浏览器"假粗体"：如果只引了 400 却到处写font-weight: 700，浏览器会合成加粗，边缘发虚。用哪个字重就引哪个文件，或者干脆上可变字体。
• 性能上按需加载：9 份静态 WOFF2 全引进来没必要，通常 3 份（400/500/700）就够一个页面；对字体设长缓存，关键字体可以加preload。
• 旧浏览器兼容：可变字体的font-variation-settings在很老的浏览器里不生效，建议静态 WOFF2 作兜底，两者font-family名保持一致即可无感切换。
• 中文内容注意：Outfit 是西文字体，中文文案会回退到系统字体。中西文混排页面，建议把中文字体明确写进 fallback 列表。

下一步：先装 Regular + Bold，明天就能用

不用纠结一次性做完所有事：今天克隆仓库，把Outfit-Regular.woff2和Outfit-Bold.woff2接到你的页面里，字体就换上了；等确认排版舒服，再按场景把 Medium、Light 或可变字体补进来。

字体选型的终点从来不是"选到最好"，而是"选完就统一"——Outfit 把 9 个字重、4 种格式、可变轴一次给齐，剩下的决定权在你手里。

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