企业官网建设流程全解析

Outfit 字体：从 100 到 900 的 9 个字重怎么用才合适

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

做品牌设计或网站时，你可能遇到这样的问题：Logo 用了 A 字体，官网用 B 字体，App 又用 C 字体；或者正文想要一种介于 Light 和 Bold 之间的粗细，却发现字体家族只有两个字重可选。Outfit 字体是一个免费开源（OFL 许可）的几何无衬线字体家族，从 Thin（100）到 Black（900）共 9 个字重，同时提供 OTF、TTF、WOFF2 与可变字体四种格式，一套字体可以覆盖网页、设计软件和移动端。

图中列出 Outfit 字体全部 9 个字重：Thin 100、ExtraLight 200、Light 300、Regular 400、Medium 500、SemiBold 600、Bold 700、ExtraBold 800、Black 900

Outfit 字体解决了哪些问题

Outfit 由品牌自动化公司 outfit.io 发布，定位很明确：它是一套"品牌字体"。字体家族与品牌标志共享同一套几何语言，从标志到正文用同一家族就能保持一致。

• 几何无衬线：字母由圆形、直线等基础几何形构成，风格简洁现代，在小字号下也保持清晰。
• 9 个字重：以 100 为步进从 100 排到 900，粗细过渡完整，排版时不用"另找一款字体凑粗体"。
• OFL 免费开源：SIL Open Font License 1.1 授权，可免费用于商业项目、可嵌入、可再分发，唯一限制是不能把字体文件本身单独售卖。
• 格式齐全：静态 OTF/TTF、Web 用的 WOFF2、以及一个字重轴（wght）覆盖 100–900 的可变字体，见仓库fonts/目录下的四个子目录。

一条命令安装 Outfit 字体

获取方式只有一条命令：

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

克隆完成后，按使用场景取对应目录即可：

• fonts/otf/：OTF 格式，适合 macOS 上的设计软件，双击即可安装。
• fonts/ttf/：TTF 格式，Windows 和 Linux 通用，右键"安装"。
• fonts/webfonts/：9 个 WOFF2 静态文件，直接拷入你的网站目录。
• fonts/variable/：可变字体（Outfit[wght].ttf与Outfit[wght].woff2），单文件覆盖全部字重。

仓库的sources/目录还包含字体源文件（Outfit.glyphs）与构建配置，配合 Makefile 执行make build可重新构建字体文件，普通使用者可以忽略这部分。

三个场景下的字重怎么选

网页端：用 @font-face 引入 WOFF2

从fonts/webfonts/取文件放进项目，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; } body { font-family: 'Outfit', sans-serif; }

font-display: swap表示字体加载完成前先显示系统字体，避免文字长时间空白。

设计软件：装 OTF 或 TTF 后直接用

把fonts/otf/或fonts/ttf/里的文件双击安装（Windows 上为右键安装），重启 Figma、Illustrator、Photoshop 等软件，字体面板里就能搜到 Outfit 家族及全部 9 个字重。

移动端：字重、字号、行高建议

Outfit 字重怎么选，一个稳妥的起点是先固定三种：Regular（正文）、Medium（小标题）、Bold（主标题），其余字重按需补。参考搭配如下：

移动端正文用 Regular、16px、行高 1.6 的阅读舒适度较好；Thin（100）笔画很细，小字号下可读性差，适合做大标题展示，不适合正文。

可变字体与加载性能，再进一步

fonts/variable/里的可变字体只有一个 wght 字重轴，单文件就能在 100–900 之间任意取粗细。在 CSS 中把font-weight写成区间100 900，就能实现可变字体字重调节：需要加粗时把font-variation-settings的'wght'值从 400 调到 700 即可，不需要再加载第二个字体文件，也支持随值连续过渡的动效。

加载性能方面，三条原则就够：

1. 按需加载：静态方案下只引入用到的字重（通常 2–3 个），9 个字重全上只会拖慢首屏。
2. 用 WOFF2：它是 Web 字体中压缩率最好的格式。
3. 长缓存 + 预加载：字体文件内容不变，可设置一年缓存；把 Regular 设为rel="preload"优先下载。

图中展示 Outfit 字体 Bold 与 Thin 两个字重的笔画粗细差异，直观呈现可变字重轴的跨度

高频踩坑，三个快速答案

Q1：网页上没生效，浏览器显示了系统默认字体？先检查src路径是否与实际文件位置一致；再确认format('woff2')与文件类型匹配。如果字体下载慢，font-display: swap期间会显示回退字体，属于正常现象。

Q2：设计软件里搜不到 Outfit？确认安装后重启软件（多数软件不会热加载新字体）。macOS 可在"字体册"中确认文件已成功注册，Windows 可在"设置 → 字体"中查看。

Q3：字体文件太大，影响加载？静态场景只保留 2–3 个常用字重的 WOFF2；若设计允许，改用可变字体单文件（Outfit[wght].woff2），体积换全字重覆盖。

小结

Outfit 用一套 OFL 授权的 9 字重几何无衬线家族，加上可变字体选项，把"网页、印刷、App 各用一套字体"的问题收敛成"只维护一个家族"。下一步建议：clone 仓库，先按上表固定 Regular、Medium、Bold 三个字重跑通你的项目，再按需要补充其余字重。

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