Outfit 字体：1 个文件顶 9 种字重的免费商用几何无衬线教程
Outfit 字体1 个文件顶 9 种字重的免费商用几何无衬线教程【免费下载链接】Outfit-FontsThe most on-brand typeface项目地址: https://gitcode.com/gh_mirrors/ou/Outfit-FontsOutfit 字体是品牌自动化公司 outfit.io 发布的几何无衬线体收录 100 到 900 的 9 档字重采用 SIL Open Font License 1.1 可免费商用可变字体版本一个文件顶 9 个——品牌物料和网站界面一套就够。 Outfit 字体一眼速览条目说明许可SIL Open Font License 1.1OFL可商用、可再分发字重体系9 档Thin 100 至 Black 900每档间隔 100文件形式TTF / OTF / WOFF2 / 可变字体单一 wght 轴设计来源为 outfit.io 字标量身打造与 logo 连字风格同源适合谁品牌设计师、网站前端、UI 团队质量保障gftools 构建、FontBakery 质检1.0 版发布于 2021-08-29 三个真实场景它怎么解品牌物料不像自己家。卡点公司字标连字很多给官网随便挑一款开源无衬线气质总差一口气。Outfit 做了什么它本来就是配套 outfit.io 字标设计的9 档字重从大标题到正文全覆盖。结果logo、标题、正文同属一家族品牌调性从头到尾一致。前端不想发 9 个请求。卡点9 档静态字体全声明就是 9 次 woff2 下载。它做了什么fonts/variable/Outfit[wght].woff2一个可变文件覆盖 100–900 全区间。结果请求数 9 变 1字重变化也不用重新加载字体。设计工具交接对不上。卡点Figma 和 Illustrator 里用的字重不一致交接后还要重调。它做了什么fonts/ttf/与fonts/otf/的 9 个文件命名和字重名SemiBold、ExtraBold 等完全统一。结果两个工具装完对得上样式直接复用。官方字重样本Outfit 字体从 Thin 100 到 Black 900 的 9 档排布⚡ 3 分钟上手拉代码git clone https://gitcode.com/gh_mirrors/ou/Outfit-Fonts桌面装打开fonts/ttf/双击 9 个 TTF 逐个安装Linux 把整个目录放进/usr/share/fonts/再执行fc-cache -f网页用把fonts/webfonts/整个目录拷到站点根目录旁按下节 CSS 声明字重无需自己构建fonts/里全是成品sources/的字体源文件留给想重新绘制构建的人。 按角色实战网页开发者/* 声明字重其余 7 档照此写法换文件名和 weight 值 */ font-face { font-family: Outfit; src: url(webfonts/Outfit-Regular.woff2) format(woff2); font-weight: 400; /* 正文常规体 */ font-display: swap; /* 先出后备字体避免空白等待 */ } font-face { font-family: Outfit; src: url(webfonts/Outfit-Bold.woff2) format(woff2); font-weight: 700; /* 标题粗体 */ } body { font-family: Outfit, sans-serif; }每个 font-face 都写上font-display: swap文字先显示只预加载最常用的两档Regular、Bold其余按需加载中英混排时font-family 后备留一个中文字体中文才不会落到系统默认设计软件用户装好fonts/ttf/后在 Figma 或 Illustrator 字体选择器里搜Outfit9 档字重一次齐样式命名保留英文字重名Regular / Bold / SemiBold和文件一一对应交接不返工印刷出图优先用fonts/otf/大纲质量更适合大幅面输出官方对比样本Outfit 字体粗体与细体的视觉差异️ 常见坑与一行解法现象原因一行解法网页里字重不生效只有一种样式只声明了一个 font-face把缺的 8 档字重补齐可变字体 URL 加载 404文件名里的[]方括号未转义URL 写成Outfit%5Bwght%5D.woff2font-variation-settings没反应浏览器不支持 woff2-variations退回webfonts/静态字重兜底设计软件字体列表里看不到新装字重系统字体缓存未刷新macOS/Linux 跑fc-cache -fWindows 重启 进阶深挖一个可变字体管住 9 种字重Outfit 源文件里只有一条轴——wghtsources/config.yaml中axisOrder只有它所以可变版逻辑很直白一个文件覆盖 100–900 全区间字重不再是 9 个离散开关。/* 可变字体单文件覆盖 100-900 全区间 */ font-face { font-family: Outfit Var; src: url(variable/Outfit%5Bwght%5D.woff2) format(woff2-variations); font-weight: 100 900; font-display: swap; } h1 { font-weight: 800; } h1:hover { font-variation-settings: wght 900; }请求数 9→1页面字体开销直接减半以上平滑插值100–900 之间浏览器连续计算不止 9 个档位动效友好悬停、滚动联动字重变化无需换文件单轴好懂CSS 与文件映射一一对应排查问题快兜底方便老浏览器不支持时切回webfonts/静态 9 档即可️ 结构速览Outfit-Fonts/ ├── fonts/ │ ├── ttf/ # 9 档 TTF桌面安装用 │ ├── otf/ # 9 档 OTF印刷输出用 │ ├── webfonts/ # 9 档 WOFF2网页用 │ └── variable/ # 可变字体单一 wght 轴 ├── sources/ # Outfit.glyphs 字体源 config.yaml 轴配置 ├── documentation/ # 字重样本图及其生成脚本 └── scripts/ # 构建辅助脚本想再往下看字体轴配置、许可证全文、构建与质检命令。 三步开始克隆仓库把fonts/ttf/的 9 个 TTF 装进桌面把webfonts/拷进站点写好 font-face 声明页面字重变化多的话直接换可变字体一套字体管住品牌和屏幕挑个场景就用起来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），仅供参考