Outfit 开源几何字体:9 种字重、4 种格式,免费商用即装即用
Outfit 开源几何字体:9 种字重、4 种格式,免费商用即装即用
【免费下载链接】Outfit-FontsThe most on-brand typeface项目地址: https://gitcode.com/gh_mirrors/ou/Outfit-Fonts
Outfit-Fonts 是 outfit.io 官方开源的几何无衬线字体仓库,OFL 许可证免费商用。它提供 Thin 100 到 Black 900 共 9 种字重,并附带 TTF、OTF、WOFF2 和可变字体四种格式,你的网页或设计软件可以直接取用。
换字体时发现免费字重不够用
给官网换字体的时候,你多半撞过同一堵墙:免费字体大多只有 Regular 和 Bold 两档。想拉开层次——主标题更重、正文标准、辅助说明更轻——手里的字体却只能"全有或全无",只好妥协排版,或者转头去找收费字体。
Outfit-Fonts 把这个问题直接解决了:9 种字重全部开源,从极细的 Thin 到特粗的 Black,随便组合,商用不用掏钱。
仓库里有什么
- 9 种字重(100-900):日常最常用的是 Light (300)、Regular (400)、SemiBold (600)、Bold (700),其余从极细到特粗按需取用
- 4 种格式:
fonts/ttf/装桌面、fonts/otf/给打印、fonts/webfonts/放网页、fonts/variable/存可变字体 - SIL OFL 1.1 许可:免费商用,可嵌入产品和文档
- 源文件
sources/Outfit.glyphs也在仓库里,改字形不用从零画
九种字重,Thin 到 Black 逐级排开
先拿到文件,再选格式
拿到仓库:
git clone https://gitcode.com/gh_mirrors/ou/Outfit-Fonts选格式,只看用途:
- 网页项目 →
fonts/webfonts/(WOFF2,体积比 TTF 小 30-50%) - 设计软件或系统安装 →
fonts/ttf/
装进系统(Linux / macOS 通用):
cp -r fonts/ttf/* /usr/share/fonts/ # 复制到系统字体目录 fc-cache -f # 重建字体缓存Windows 不用命令行,在fonts/ttf/里右键文件选"安装"即可,效果一样。
网页端怎么配
只需声明实际用到的字重,这里是 Regular 和 Bold 两档的最小配置:
/* Outfit 网页字体:只声明用到的 2 档 */ @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', system-ui, sans-serif; }其余 7 种字重照抄这套模板,换文件名和font-weight就行。
设计软件里怎么用
免费商用字体安装完成后,Figma、Illustrator、InDesign 里搜 "Outfit",字重下拉里 9 档齐全。主标题选 Bold (700),正文 Regular (400),辅助信息降到 ExtraLight (200),同一份文档全程只用一个家族,品牌感就统一了。
同一家族内,Bold 与 Thin 的对比张力
进阶:可变字体一个文件搞定
fonts/variable/里那个Outfit[wght].woff2把 9 种字重压进了一个文件:
@font-face { font-family: 'Outfit Variable'; src: url('fonts/variable/Outfit[wght].woff2') format('woff2-variations'); font-weight: 100 900; /* 一个文件覆盖全部字重 */ }好处很直接:9 个 WOFF2 文件变成 1 次 HTTP 请求;font-weight: 550这种中间值也能输出,不再被整数档位卡住;配合 CSS transition,悬停时字重还能平滑过渡。
避坑清单
- 装完系统里搜不到字体 → 复制文件后必须跑
fc-cache -f,再重启软件 - 网页字体加载慢 → 只声明真正用到的字重,用 WOFF2 别用 TTF
- Thin (100) 小字号发虚 → 它只适合大字号装饰,正文至少用 300
- 浏览器显示的不是 Outfit → 检查
font-family名称是否与@font-face里完全一致 - 软件里出现两个 Outfit → OTF 和 TTF 只装一种,别混装
项目文件导航
Outfit-Fonts/ ├── fonts/ # 现成字体文件 │ ├── ttf/ # 9 字重 TTF,桌面安装用 │ ├── otf/ # OTF 版本 │ ├── webfonts/ # WOFF2 网页字体 │ └── variable/ # 可变字体,wght 100-900 ├── sources/ # Outfit.glyphs 源文件与 config.yaml └── documentation/ # 样张图及生成脚本构建和测试走Makefile(make build/make test),一般用不到;想自定义字形时从sources/config.yaml和Outfit.glyphs入手。
9 种字重、4 种格式、免费商用,仓库里一次拿齐。克隆下来,10 分钟后你的页面或设计稿就能换上 Outfit。
【免费下载链接】Outfit-FontsThe most on-brand typeface项目地址: https://gitcode.com/gh_mirrors/ou/Outfit-Fonts
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
