Outfit字体免费完整的9字重几何无衬线字体桌面到网页全场景可用【免费下载链接】Outfit-FontsThe most on-brand typeface项目地址: https://gitcode.com/gh_mirrors/ou/Outfit-Fonts做页面排版时标题、正文、脚注需要不同的粗细你手头的开源字体却只有三四种字重版面显得单薄。Outfit 是一款免费开源的几何无衬线字体从 Thin 到 Black 的 9 种字重整齐备还附带网页压缩版和可变字体克隆下来就能直接用。 Outfit 是什么Outfit 是 outfit.io 公司为自家品牌设计的几何无衬线字体也是它的官方字标字体。字形骨架取自圆形、弧线等几何形状转角圆润但不发飘整体现代小字号下依然清晰。它采用 SIL 开放字体许可证OFL1.1 发布个人和商用都免费不需要额外授权。项目信息定位几何无衬线字体适合网页、UI 与品牌设计字重9 种Thin (100) 到 Black (900)格式TTF、OTF、WOFF2、可变字体许可OFL 1.1完全免费商用从 Black 到 Thin 的 9 种字重一次列全粗细阶梯一目了然。 9个字重怎么用每个都有分工排页面要有层次而字体家族只有 Regular 和 Bold 时你只能靠字号和颜色硬凑。Outfit 把粗细分成 100 到 900 共 9 档每档都能承担明确角色主标题Bold (700) 或 ExtraBold (800)次级标题SemiBold (600)正文Regular (400) 或 Light (300)脚注、标注ExtraLight (200) 或 Thin (100)强调文本比正文高 1 档即可不必跳到黑体粗到 Bold、细到 Thin不用改字号也能表达响与轻。实现方式很直接每种字重是独立文件仓库同时提供 TTF 和 WOFF2 两个版本另有包含全部 9 档的可变字体。系统装 TTF、网页用 WOFF2同一字族两边粗细完全对得上。⚡ 网页端加载格式已经替你选好网页字体加载慢通常是文件太大、请求太多。仓库把常用格式都预构建好了fonts/webfonts/里的 WOFF2 每个约 28KB比同字重的 TTF约 75KB小 40% 左右fonts/variable/里的可变 WOFF2 只有 45KB一个文件覆盖全部 9 档字重。你不需要做任何压缩或转换按目录取文件就行。 上手实测三步装好并用起来最典型的场景把字体装进系统同时在网页项目里用起来。以 Linux/macOS 为例。第一步获取字体仓库git clone https://gitcode.com/gh_mirrors/ou/Outfit-Fonts第二步把 TTF 版装入系统。Windows 用户跳过此步直接在fonts/ttf/里右键安装即可sudo cp -r Outfit-Fonts/fonts/ttf/* /usr/share/fonts/ sudo fc-cache -f -v第三步在网页项目里声明网页版。把需要的 woff2 文件放进静态目录CSS 中为每个用到的字重写一条 font-face注意font-weight必须与文件对应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, -apple-system, sans-serif; }跑通之后设计软件里搜 Outfit 就能直接看到 9 档字重网页标题加粗也不会突然变系统字体。 进阶一招可变字体一个文件走天下如果网站文字样式很多别给每档字重都发一个请求改用fonts/variable/Outfit[wght].woff245KB内含 100–900 全部字重font-face { font-family: Outfit Variable; src: url(fonts/variable/Outfit[wght].woff2) format(woff2-variations); font-weight: 100 900; font-display: swap; } h1 { font-family: Outfit Variable; font-weight: 800; } p { font-family: Outfit Variable; font-weight: 400; }浏览器会从同一个文件里按需取任意粗细请求数从 9 个降到 1 个悬停时做字重渐变动画也顺理成章。 新人最容易踩的两个坑装完找不到字体只把文件拷进目录不算安装。Windows 要走右键安装Linux 要执行fc-cache -f -v刷新缓存然后重启设计软件——多数软件不会实时感知新字体。网页标题看起来偏细多半是 font-face 只声明了 400标题却写了 700。浏览器会退回系统字体模拟效果发虚。每个用到的字重单独声明一条即可。获取方式Outfit 用一个字体家族解决了字重不够、格式不全、许可受限三个问题今天的版本从这里开始git clone https://gitcode.com/gh_mirrors/ou/Outfit-Fonts【免费下载链接】Outfit-FontsThe most on-brand typeface项目地址: https://gitcode.com/gh_mirrors/ou/Outfit-Fonts创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
