Source Sans 3可变字体实战如何用一个文件玩转200到900全部字重【免费下载链接】source-sansSans serif font family for user interface environments项目地址: https://gitcode.com/gh_mirrors/so/source-sans做网页最头疼的一件事标题要粗、正文要细、辅助文字更细于是页面里塞了四五个字体文件加载慢还难维护。Source Sans 3 的可变字体Variable Fonts版本给出了另一种答案——把字重从 ExtraLight(200) 到 Black(900) 的全部变化塞进一个文件浏览器按你指定的font-weight实时渲染。这篇文章就带你从零跑通它。先看效果一个滑块拖动即变字重 在动手讲原理之前先复制下面这段代码保存为index.html放在项目根目录和source-sans-3VF.css同级用浏览器打开!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleSource Sans 3 可变字体演示/title link relstylesheet hrefsource-sans-3VF.css!-- 引入项目自带的可变字体样式 -- style body { font-family: Source Sans 3 VF, sans-serif; } .demo { font-size: 48px; font-weight: 400; } /style /head body input typerange min200 max900 value400 idweight p classdemo idtext拖拽滑块看字重连续变化/p script // 滑块数值直接映射为 font-weight无需切换任何字体文件 document.getElementById(weight).addEventListener(input, function (e) { document.getElementById(text).style.fontWeight e.target.value; }); /script /body /html拖一下滑块你会发现400、550、720……任意数值都能得到对应的笔画粗细中间没有任何断档。这就是可变字体的核心能力一个文件里包含一条字重轴浏览器按需取值而不是像传统字体那样每个字重单独一个文件。三分钟完成环境准备一份清单看懂文件目录这个项目本质上是一个字体发布包不需要安装依赖或构建工具前置条件只有两条一台电脑 现代浏览器Chrome 62、Firefox 62、Safari 11、Edge 17 均已支持可变字体获取字体文件git clone https://gitcode.com/gh_mirrors/so/source-sans或直接下载仓库压缩包拿到仓库后目录是这样组织的source-sans/ ├── OTF/ # 静态字体的 OpenType 格式14 个文件 ├── TTF/ # 静态字体的 TrueType 格式14 个文件 ├── VF/ # 可变字体源文件upright italic 各 2 个 │ ├── SourceSans3VF-Upright.ttf │ └── SourceSans3VF-Italic.ttf ├── WOFF/ # 网页用 WOFF 格式含 VF 子目录 ├── WOFF2/ # 网页用 WOFF2 格式含 VF 子目录压缩率最高 ├── source-sans-3.css # 静态字体的整套 font-face 声明 ├── source-sans-3VF.css # 可变字体的 font-face 声明本教程主角 └── package.json # 版本信息3.46.0 记住两个关键位置网页开发只用 WOFF2/VF/ 目录下的 4 个文件样式声明直接复用项目自带的 source-sans-3VF.css。核心操作分步拆解五步做出完整动态字体效果第一步注册字体族看懂font-face里的200 900打开 source-sans-3VF.css核心只有两个font-face块一正一斜font-face{ font-family: Source Sans 3 VF; font-weight: 200 900; /* 声明可用字重是一个连续区间 */ font-style: normal; src: url(WOFF2/VF/SourceSans3VF-Upright.ttf.woff2) format(woff2-variations), url(WOFF/VF/SourceSans3VF-Upright.ttf.woff) format(woff-variations), url(VF/SourceSans3VF-Upright.ttf) format(truetype-variations); }注意这里和普通字体的区别font-weight写的是200 900这种区间src里的format()也带有-variations后缀。浏览器看到这两处标记就知道这是一条可变字体轴之后任何落在 200~900 之间的font-weight它都能渲染。第二个font-face只是把font-style换成italic并指向 WOFF2/VF/SourceSans3VF-Italic.ttf.woff2正斜体由此齐了。第二步在 CSS 里用字重差构建内容层次字体注册好之后用法和普通字体几乎没有区别。你可以像这样为不同元素分配字重body { font-family: Source Sans 3 VF, sans-serif; } h1 { font-weight: 800; } /* 大标题接近最粗 */ h2 { font-weight: 650; } /* 二级标题取一个静态版没有的中间值 */ p { font-weight: 400; } /* 正文标准字重 */ small { font-weight: 300; } /* 辅助文字轻量 */一个小惊喜项目自带的静态样式 source-sans-3.css 只声明了 200/300/400/600/700/900 六个档位而可变字体可以取任意值——比如上面650这种偏细的粗体静态版无论如何都做不出来。第三步用 CSS 变量 JS 实现实时调节把字重抽成一个 CSS 变量再让滑块去改它就是文章开头的那个演示逻辑拆开只有两句:root { --font-weight: 400; /* 全局字重变量默认 400 */ } body { font-family: Source Sans 3 VF, sans-serif; font-weight: var(--font-weight); }// 监听滑块输入把值写入 CSS 变量整页字重随之联动 document.querySelector(#weight-control).addEventListener(input, function(e) { document.documentElement.style.setProperty(--font-weight, e.target.value); });这种写法的好处是一处定义、处处生效无论页面里有多少个元素只要它们引用var(--font-weight)滑块一动全部跟着变。第四步用媒体查询做响应式字重可变字体和响应式设计是天然搭档——屏幕越小字重越轻阅读越舒服/* 手机端用较轻字重提升小屏可读性 */ media (max-width: 768px) { body { font-weight: 300; } } /* 桌面端恢复标准字重 */ media (min-width: 769px) { body { font-weight: 400; } }第五步font-variation-settings精细控制如果你需要一次性指定多个字体轴可以用更底层的写法.custom-text { font-variation-settings: wght 650; /* 字重轴200~900 */ } .italic-text { font-style: italic; /* 斜体交给 font-style浏览器自动切到斜体文件 */ }Source Sans 3 VF 主要暴露了两条轴wght字重200~900和ital斜体开关0正体1斜体。日常使用建议优先用font-weight和font-style这两个标准属性兼容性和可读性都更好font-variation-settings适合需要极精确取值的场景。一张表速查字重档位、字体轴与格式优先级字重档位对照可变字体 vs 静态版视觉描述静态版文件名前缀可变字体取值ExtraLight 特细SourceSans3-ExtraLight200Light 细体SourceSans3-Light300Regular 常规SourceSans3-Regular400Medium 中等静态版没有—500Semibold 半粗SourceSans3-Semibold600Bold 粗体SourceSans3-Bold700Black 最粗SourceSans3-Black900字体轴速查轴含义取值范围wght字重200 ~ 900ital斜体开关0正体~ 1斜体加载格式优先级性能从优到劣src: url(WOFF2/VF/SourceSans3VF-Upright.ttf.woff2) format(woff2-variations), url(WOFF/VF/SourceSans3VF-Upright.ttf.woff) format(woff-variations), url(VF/SourceSans3VF-Upright.ttf) format(truetype-variations);WOFF2 体积最小项目里的可变字体 WOFF2 文件仅 200KB 左右现代浏览器会按顺序自动选择第一个能识别的格式无需你手动判断。常见坑位排雷三个最容易翻车的点坑位一字体没生效还是默认黑体现象font-family写对了页面却纹丝不动。原因多半是font-face的src路径写错——CSS 里用的是相对路径如果你的 HTML 不在项目根目录WOFF2/VF/...就会 404。方案打开浏览器开发者工具的 Network 面板确认字体请求是否返回 200按HTML 文件所在位置 → 字体文件位置调整相对路径或改用绝对路径。坑位二字重只有几个档位拖动不连续现象font-weight: 550无效显示效果和 400 或 600 一样。原因你可能引入了 source-sans-3.css静态版只有 6 个离散档位而不是source-sans-3VF.css。方案确认引入的是source-sans-3VF.css且font-face中font-weight是200 900的区间写法。两个 CSS 文件font-family名字不同Source Sans 3vsSource Sans 3 VF别混用。坑位三老旧浏览器打开变回普通字体现象某些低版本浏览器里可变字体不渲染。方案把可变字体作为渐进增强。先给body设一个系统字体或静态字体做回退再在支持可变字体的浏览器里覆盖。font-face的format(woff2-variations)声明本身就能让旧浏览器跳过该资源、自动走回退字体。下一步把可变字体用进你的真实项目 ⚡一句话总结Source Sans 3 的可变字体用 2 个文件正体 斜体覆盖了传统方案 28 个静态文件的工作量换来的是任意字重实时可取、加载体积大幅缩减、响应式排版顺手很多。你可以从这三件事开始把 source-sans-3VF.css 连同 WOFF2/VF/ 目录拷进你的前端项目替换掉现有的多字体加载方案。在页面里尝试h1 { font-weight: 800 }、p { font-weight: 400 }的字重层级感受单一文件的排版自由度。需要商用或二次分发时先读一遍 LICENSE.mdSIL OFL 1.1 开源协议允许自由使用与嵌入并留意 package.json 里的版本号 3.46.0跟进后续更新。如果还想了解字体的设计背景可以查阅项目根目录的 README.md。动手试一试你的下一个页面就该由可变字体驱动。【免费下载链接】source-sansSans serif font family for user interface environments项目地址: https://gitcode.com/gh_mirrors/so/source-sans创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
