Outfit 字体完全指南9 种字重免费开源4 种格式一次拿全【免费下载链接】Outfit-FontsThe most on-brand typeface项目地址: https://gitcode.com/gh_mirrors/ou/Outfit-FontsOutfit 是一款免费开源的几何无衬线字体自带从 Thin(100) 到 Black(900) 的 9 种静态字重和一份可变字体。当你为一个新品牌搭视觉系统、需要标题、正文、标注三处文字保持同一套气质时可以直接用它3 分钟内就能在网页上出效果。 Outfit 字体能力总览字重、格式与许可能力项具体事实静态字重9 档Thin(100)、ExtraLight(200)、Light(300)、Regular(400)、Medium(500)、SemiBold(600)、Bold(700)、ExtraBold(800)、Black(900)格式覆盖fonts/下分 otf、ttf、webfonts(woff2)、variable 四个目录每个字重都有对应文件可变字体单条 wght 轴覆盖 100–900woff2 版仅约 44KB许可SIL OFL 1.1商用、嵌入、修改均可详见 OFL.txt质量保障上游用 FontBakery 按 Google Fonts 标准跑 QA 测试make test可本地复现 最短路径一键获取 Outfit 字体并跑通网页获取仓库只需要一条命令git clone https://gitcode.com/gh_mirrors/ou/Outfit-Fonts拿到仓库后最快看到效果的路径是网页。把fonts/webfonts/里的文件放进你的站点目录然后在 CSS 里声明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; }刷新页面正文就换成 Outfit 了。桌面端则是把fonts/ttf/或fonts/otf/里的文件整个装进系统字体目录Figma、Sketch、Adobe 系列都能直接选用无需额外配置。 按场景选格式的对照表什么场合用哪个文件场景推荐文件位置选择理由网页优先方案Outfit[wght].woff2fonts/variable/一个 44KB 文件覆盖全部 9 档按需渲染字重网页老浏览器兜底Outfit-Regular.woff2fonts/webfonts/静态单字重约 28KB用几个字重就放几个文件macOS 设计软件Outfit-*.otffonts/otf/字体册直接识别9 个字重各一个文件Windows / 跨平台Outfit-*.ttffonts/ttf/系统兼容性最广的通用格式二次开发 / 改字形Outfit.glyphssources/Glyphs 源文件配 sources/config.yaml 可重新构建可变字体的用法一句话带过在font-face里声明font-weight: 100 900用font-variation-settings或font-weight即可在同一文件里连续调整粗细悬停加粗这类动效也是靠它实现的。⚠️ 新手最容易踩的 5 个坑网页里字重怎么都不变化→ 原因是可变字体没在font-face里声明font-weight: 100 900浏览器只能当静态字体处理 → 补上这行声明即可。设计软件里只有 Regular切不到其他字重→ 原因是只安装了单个静态文件字重切换依赖同族的其他文件 → 把fonts/ttf/或 otf整个目录一次装完。中文内容自动变成了系统黑体→ 原因是 Outfit 的字符集以拉丁字母为主中文没有对应字形 → 在font-family末尾保留一个中文字体做回退这是预期行为不是 bug。make build报错→ 原因是构建依赖 Python 虚拟环境和 gftools 工具链裸跑会缺包 → 按 Makefile 的目标顺序先执行make venv再make build或直接使用仓库里已构建好的fonts/成品。老浏览器加载了可变字体却显示成 Regular→ 原因是该浏览器不支持可变字体规范 → 在supports判断里回退到fonts/webfonts/的静态文件即可。收尾Outfit 用一套字形、四种格式、9 档字重覆盖了从品牌标识到正文排版的日常需求OFL 1.1 许可让它可以放心放进任何商业项目。下一步就把fonts/webfonts/或fonts/ttf/拷进你手头的项目先让 Regular 和 Bold 跑起来字重体系够用了再逐步加。【免费下载链接】Outfit-FontsThe most on-brand typeface项目地址: https://gitcode.com/gh_mirrors/ou/Outfit-Fonts创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考