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

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然后按你的场景挑格式别贪多你的场景拿哪个目录说明写网页fonts/webfonts/WOFF2 压缩率最高浏览器首选macOS 设计软件Figma、Illustratorfonts/otf/拖进去就能用Windows 设计/办公场景fonts/ttf/右键安装即可需要动态调字重的前端玩法fonts/variable/一个文件覆盖 100–900 全部字重最后加几行 CSS 就能跑以网页为例只引正文最必需的 Regular 和标题常用的 Boldfont-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就是普通的woff2font-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 testFontBakery 质检、make proof生成 HTML 样张整条流水线都是开源的。带来什么想自查质量、或基于它微调一套自家变体门槛很低。怎么用本地装好 Python 环境后make build会重新生成fonts/下所有文件make proof生成网页样张方便逐字核对。场景示范字重怎么选一张表定下来做品牌规范时最容易凭感觉的环节直接给一套可抄的默认值应用场景推荐字重字号参考行高备注主标题 / 品牌口号Bold(700) 或 Black(900)32–48px1.2要响就用 Black要稳用 Bold章节 / 卡片标题Medium(500) 或 SemiBold(600)24–32px1.3别超过 2 档否则层次乱正文Regular(400)16–20px1.6默认值最省心辅助说明 / 脚注Light(300)14–16px1.5小字号上别用 Thin太细糊格式选择同理记住一条主线网页 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考