vf对比：一次官网改版复盘
vf对比不能只看“一个文件”和“多个文件”的表面差异。用一次官网首屏改版来还原：同样是标题、按钮、正文三类文字，静态字体和VF在体积、维护、动效、品牌感上完全不是一套打法。
Q1：这个案例原来哪里不舒服
原页面是典型SaaS官网：首屏一句大标题、两行副标题、两个按钮、下面接产品截图。设计稿里用了400、500、600、700四个字重，移动端标题还压窄了一点。静态字体方案要加载多份文件，设计师改一次标题层级，前端就要重新确认字重。
做vf对比时，我们没有先谈审美，而是把文字使用点列出来：首屏标题需要700到760之间的微调，副标题用420更舒服，按钮用600，移动端标题宽度需要稍微收紧。这些需求如果用静态字体，会变成一堆折中。
Q2：静态字体方案怎么做
静态方案最稳：Regular、Medium、SemiBold、Bold四份文件，CSS写法清楚，设计交付也容易。优点是风险低，团队成员都懂；缺点是档位死，一旦标题在680最顺眼，最后只能选600或700。
它适合节奏快、页面少、字体变化不多的项目。比如只有文章页和普通按钮，静态字体反而省事。这个案例的问题是首页承担品牌表达，标题越大，100个字重单位的差别越明显。
Q3：VF方案改了什么
VF方案只保留一套可变字体文件，再把常用档位写成设计令牌：body 400、caption 360、button 600、hero 740。移动端标题没有换字体，而是轻微调整宽度轴，让两行标题不再挤成三行。
真正省下来的不是几KB文件，而是沟通成本。设计师说“标题再硬一点”，前端不必找新字重；品牌负责人觉得按钮太重，也不用重切字体包。VF把排版从“选固定档位”变成“在安全范围内微调”。
Q4：对比结果怎么判断
视觉上，VF赢在连续。标题、按钮、说明文字之间的层级更顺，不像静态方案那样一跳就是一档。维护上，VF也更舒服，尤其是多语言、多断点页面，字重和宽度可以一起管理。
但VF不是全胜。调试时间更长，设计规范必须写清楚，否则每个页面都能调出一套“新字体”。静态字体的优势是边界清楚，适合不需要品牌细节的项目。
Q5：这次复盘留下什么结论
vf对比最有用的结论是：看页面是否需要“连续变化”。如果只是正文阅读，静态字体够用；如果标题系统、响应式排版、品牌动效都吃字体细节，VF更值得。
我的经验是，别把VF当性能方案卖给团队，要把它当排版控制方案。性能可能变好，也可能持平；但当设计系统需要更细颗粒度时，VF的价值会非常明显。
常见问题
- vf对比静态字体最大的区别是什么？
- 静态字体是固定档位，VF是在一个字体文件里连续调节轴值。前者稳定简单，后者更适合复杂排版和品牌细节。
- 官网改版一定要用VF吗？
- 不一定。只有当首页大标题、响应式断点、字重层级和动效都需要精细控制时，VF才明显占优。
- VF会让前端维护更复杂吗？
- 会有初期复杂度，所以必须定义固定档位和安全范围。规范写好后，长期维护反而更统一。