1. Montserrat 到底是什么凭什么被用烂了如果你最近在接手品牌官网、SaaS 后台或者电商详情页翻开源码或者设计稿十有八九会撞见 Montserrat 这个名字。它几乎成了“现代几何无衬线”这个类别的默认答案免费商用、九档字重、还带可变字体版本一套文件能撑起从超大标题到正文注释的全部层级。这篇文章就是想把这款字体从头到尾讲透——它是什么来路、九档字重在实际项目里怎么分工、可变字体和静态字体到底该选哪一套、Web 端怎么落地才不掉性能、排版参数怎么调才不像新手。适合刚入行的设计师和前端也适合已经用了两三年但一直只会font-weight: 700一个值走天下的老手。我自己的经历挺典型最开始用它纯粹是因为它免费、名字好记随便一贴就能出效果后来做多了才发现真正难的不是“用上”而是“用对”。同样一款 Montserrat有人排出来干净利落有人排出来像 PPT 模板差别基本都在字重搭配、字距微调和加载策略这三个地方。这三块内容我会在下面拆得比较细能直接抄的部分我都会给出可以直接粘贴的代码和参数。1.1 它其实是从一块户外导视牌里长出来的Montserrat 的身世比很多人想的要有意思。它最初并不是为了做网页字体而设计的而是为南美某座城市一个城区的公共导视系统做的定制字形后来设计者觉得这套骨架有普适价值才把它整理成完整的字族公开发布。这个出身非常关键它解释了为什么这款字体在大字号、短文本、强识别的场景下表现特别好——导视牌要在十几米外被人一眼看清字形必须简洁、开口大、笔画均匀。所以你去看它的字母结构a是单层的圆碗g是单层的t的顶部是平的而不是斜切的M的两条腿几乎垂直R的腿部是一条干脆的直线。所有这些都是为了“远距离识别”服务的。反过来说这也意味着它不是一款为长文阅读优化过的字体——大段正文用它读久了眼睛会累因为几何骨架缺少足够的笔画对比来引导视线。我在实际项目里的做法是Montserrat 负责所有“被看见”的地方比如主标题、按钮、数字、导航、徽标文字正文则交给一套更适合长读的字体或者干脆用系统默认。这个分工思路后面几节会反复用到。提示判断一款字体适合标题还是正文一个简单的测试方法是把它缩小到 14px 左右连续读三段 200 字的中文混排英文如果开始觉得“字挤在一起”或者“每条笔画都一样粗”那它就只适合做标题。1.2 免费商用的边界很多人其实理解错了这是被问得最多的问题“Montserrat 能不能免费商用能不能嵌到 App 里能不能放在客户的产品里卖钱”答案是可以但边界要说清楚。它采用的是开放字体授权协议SIL Open Font License 1.1这个协议的核心条款有四条我用大白话翻译一下条款大白话解释实际影响允许自由使用商用、非商用、印刷、嵌入、二次分发都行客户项目、付费产品、包装印刷都不需要授权费允许修改可以改字形、改间距、做子集化裁剪你可以为品牌做定制版比如把某个字母改掉修改后不能独占你改了以后不能把修改版当成自己独有的字体去卖改完的版本如果对外分发也必须沿用同一协议不能单独售卖字体文件不能把字体文件本身当商品卖卖设计服务、卖模板、卖 App 都没问题卖字体文件不行最容易踩坑的是第四条。有些团队把字体文件打包进“字体素材包”出售这就越界了但把字体嵌进网页、嵌进 App、嵌进 PDF 交付给客户都属于正常使用。还有一个细节修改版比如你裁剪过字符集的子集文件如果对外分发理论上要保留原授权文件和版权声明这一条很多人忽略严格意义上讲是必须做的。注意字体授权协议本身偶尔会更新版本商业项目尤其是大客户项目建议在交付前把当前版本的协议原文下载留档别只凭“我记得它是免费的”这句话。这是我踩过一次坑之后养成的习惯。1.3 骨架特征决定了它能干什么、不能干什么把 Montserrat 和另外几款常见的几何无衬线放在一起看它最明显的三个特征是字碗偏宽、x-height 偏高。这带来的直接效果是小字号下依然清晰但大段排布时字符占位偏多同样的字号下一段 Montserrat 排出来的行数会比用一些窄字体的更多。做多语言版本的页面时这一点会直接影响布局高度。笔画粗细均匀几乎无对比。好处是整体感强、现代感足坏处是缺少“呼吸感”在正文尺寸下容易糊成一片。这就是为什么它的大字号表现远好于小字号。数字是等宽的tabular 风格并且有丰富的数字样式。做价格、数据看板、倒计时、成绩单这类场景它的数字排布非常整齐不会出现“1 比 8 窄一半”的抖动。这一点在做实时刷新的数字组件时特别有用——不用额外设置font-variant-numeric: tabular-nums也能保持稳定当然显式写上更保险。搞清楚这三个特征很多选型问题就自解了数据密集的仪表盘、需要强调的营销页、品牌感强的落地页它很合适长篇小说、法规条文、上千字的说明文档它不合适。2. 九档字重是一套层级系统不是九种花样九档字重100 到 900每 100 一档是 Montserrat 最容易被浪费掉的部分。绝大多数人只用 400 和 700剩下的七档形同虚设。但实际上九档字重的真正价值在于它能让你在不换字体、不换字号的前提下建立起足够细腻的信息层级。这一点在后台系统、数据表格、复杂表单这类“层级多但空间小”的场景里尤其明显。2.1 字重对照表每一档到底该派什么用场先上一张我自己在项目里一直在用的对照表左边是字重右边是我实际会派给它的任务。这张表不是教条但它能帮你避开“所有东西都用 400 和 700”这个新手陷阱。字重名称我给它的实际任务使用频率100Thin超大装饰性标题48px 以上、水印式文字极低200ExtraLight品牌大标题、海报副标题低300Light大号引言、超大数字展示如数据大屏核心指标中低400Regular长文本备用、表格内容、表单说明高500Medium正文强调、导航项、次级标题高600SemiBold卡片标题、按钮文字、标签极高700Bold主标题、板块标题、需要强对比的强调极高800ExtraBold营销页大标题、数字冲击力场景中900Black品牌字形、超大数字、活动主视觉低看这张表你会发现一个规律真正的重活集中在 500、600、700 三档100 到 300 和 800 到 900 是“特种兵”用得少但关键时候不能缺。这也解释了为什么很多人只用两档也“能用”——因为主力确实就那么两三档。但如果你想让页面看起来有质感中间那几档的细腻过渡是省不掉的。我举个具体例子。一个卡片组件里同时存在卡片主标题、卡片副标题、正文摘要、底部操作链接。新手写法是标题 700、其余全 400结果就是标题突兀、层次断裂。我的写法是标题 600、副标题 500、摘要 400、链接 500 加主色。四个层级只用了三档字重但视觉上明显更顺因为它模拟了真实的粗细渐变而不是二值跳变。2.2 字重、字号、行高必须一起调单独调一个必翻车很多人调字重的时候只动字重结果发现“加粗了但不好看”。原因很简单字重变了字面的视觉体积也变了原来的字号和行高就不匹配了。这里有一套我用了很久的经验公式不是数学定理但实测下来基本不会出错字重越高字号越大行高越紧字距越负。反过来字重越低、字号越小行高越松字距越接近 0。具体参数上我的默认起点是这样的场景字号字重行高字距页面主标题40–56px7001.1–1.15-0.02em板块标题28–32px7001.2-0.01em卡片标题18–20px6001.350正文15–16px4001.65–1.750辅助说明13–14px400/5001.60.005em按钮文字14–16px60010.01em全大写小标签11–12px6001.40.08–0.12em最后一行值得单独说。全大写文本比如NEW ARRIVAL、SECTION 01这类小标签在几何无衬线里会显得非常拥挤因为大写字母的间距本来就窄而 Montserrat 的字母又偏宽。这时候必须手动加正字距0.08em 起步字号越小加得越多。我见过太多页面的全大写小标签挤成一坨黑块问题就出在这里。心得字距用em而不是px。用 px 的话一旦响应式字号变化字距就不跟着缩放大屏上看着还行手机上一塌糊涂。这个坑我在早期项目里踩过不止一次。2.3 三个高频字重误用看看你中了几个第一个400 和 500 撞车。在多数屏幕上Regular400和 Medium500的差别非常细微特别是小字号加低分辨率屏。如果你用 400 做正文、500 做次级标题用户在笔记本上根本分不出来层级就白做了。我的处理方式是要么把 500 换成 600拉开差距要么保留 500但配合颜色或背景区分不能只靠字重。第二个900 滥用。Black 这档的存在感太强忍不住就想用。但它在中文混排环境下有个问题——中文回退字体通常没有对应的 900 字重浏览器会做“伪加粗”或者直接降级到最接近的可用字重导致中英文粗细不一致非常难看。解决办法后面第 6 节会讲。第三个用字重代替颜色做强调。有些设计稿里一段正文中的关键词加粗到 700结果整段文字节奏被打乱读起来一卡一卡的。正确的做法是 500 或 600 就够甚至用颜色更有效。字重是层级工具不是强调工具这个区分很重要。3. 可变字体与静态字体到底装哪一套这是近两年问得越来越多的问题。Montserrat 同时提供静态字体每个字重一个文件加斜体一共 18 个和可变字体一个文件包含 100 到 900 的连续字重轴。两者的能力差距是数量级的但代价也不同选错了要么浪费性能要么用不上能力。3.1 技术差异与体积账算一笔真实的账静态字体和可变字体的核心区别用一句话说就是静态是离散的台阶可变是连续的斜坡。静态版本你只能选 100、200、300……这九个整数可变版本你可以取 437、612、850 任意小数虽然视觉上大部分场景用不到这么细但中间值的可用性是实打实的。体积上我实测过一组数据拉丁字符集woff2 格式已做基础子集化方案文件数总体积可覆盖字重静态全量9 档 斜体18约 380–420 KB九个整数档静态裁剪常用 3 档 1 斜体4约 85–100 KB400/600/700可变字体正体1约 45–60 KB100–900 连续可变字体正体 斜体2约 90–110 KB100–900 连续 斜体这张表基本能说明问题可变字体比“全量静态”省 80% 以上体积比“裁剪到三档静态”也只多一点点但能力完全不是一个量级。所以只要目标环境支持可变字体是默认答案。那什么时候还得用静态一是要兼容非常老的浏览器内核二是设计工具或印刷流程对可变字体支持不完整比如某些排版软件导出 PDF 时可变轴会被“拍平”成默认值三是你需要对某一个特定字重做手工微调比如品牌定制版的 700 和标准版不同。这三种情况下静态字体仍然是更稳妥的选择。注意印刷和 PDF 交付场景一定要在导出后抽查一下字重是否保住了。我遇到过一次设计稿里用的是可变字体的 650导出 PDF 后全部变成了 400原因是导出环节不认识字重轴。这种问题在屏幕上完全看不出来只有打样或客户打开 PDF 才会发现。3.2 三个必须上可变字体的真实场景场景一响应式字重。移动端屏幕小、字要放大此时字重应该略降否则大字号加粗体会显得笨重。用可变字体可以写font-variation-settings: wght 620配合媒体查询在大屏上调到 680。如果只有静态字体你只能在 600 和 700 之间硬跳中间那个“刚刚好”的值永远拿不到。场景二滚动联动效果。一些营销页会做标题随滚动逐渐变粗的动效。可变字体可以直接把wght轴接到滚动进度上丝滑连续静态字体只能一帧一帧跳档视觉上就是“卡”。场景三品牌色/字重的主题切换。深色模式下同样的字重看起来会更粗因为亮字压暗底会有视觉膨胀这时候把字重从 600 降到 570 就能让两种模式的观感一致。这种微调只有可变字体做得到。3.3 兼容兜底一条不能省的写法可变字体的兼容写法有几种我推荐的是“font-weight声明区间 format(woff2-variations)”这一套原因是它能让浏览器自动把font-weight属性映射到wght轴上你在 CSS 里写font-weight: 650就能生效不需要到处写font-variation-settings。font-face { font-family: Montserrat Variable; src: url(/fonts/montserrat-var-latin.woff2) format(woff2-variations), url(/fonts/montserrat-var-latin.woff2) format(woff2); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U0000-00FF, U0131, U0152-0153, U02BB-02BC, U2000-206F, U2074, U20AC, U2122, U2191, U2193; }font-weight: 100 900这行是关键它告诉浏览器“这个文件覆盖整个区间”。写font-weight: normal或者只写一个值浏览器就会误判导致你写 650 时又去触发一次合成加粗效果就毁了。unicode-range也不能省。它明确告诉浏览器这份文件只负责拉丁字符遇到中文时直接走回退字体避免浏览器下载了一堆用不上的字节还拖慢渲染。4. Web 端从头到尾的落地流程这一节是纯操作部分从拿到文件到上线我会把每一步的参数和理由都写清楚。你可以直接照着做也可以只看自己缺的那一步。4.1 取文件、做子集、控体积从开源字体托管平台下载下来的是一个压缩包里面通常有三种格式TTF桌面用、WOFF老 Web 格式、WOFF2现代 Web 格式压缩率最高。Web 端只用 WOFF2其余全部丢掉别为了“兼容性”把 TTF 也挂上去那等于白白多下载几百 KB。下载下来直接塞进项目通常体积是 100 KB 级别拉丁字符集。对于追求首屏速度的项目还能再裁剪一刀——把用不到的字符去掉。如果你的站点是纯英文加数字用不到西里尔字母、希腊字母那就用fonttools做一次子集化# 安装工具 pip install fonttools brotli # 只保留 ASCII 常用字符 少量符号 pyftsubset Montserrat-VariableFont_wght.ttf \ --unicodesU0020-007E,U00A0-00FF,U2018-201D,U2026,U20AC \ --layout-featureskern,liga,calt,tnum \ --flavorwoff2 \ --output-filemontserrat-subset.woff2这里几个参数值得解释一下。--layout-features里的kern是字距调整必须留否则字母间距会变得很难看tnum是等宽数字如果你的页面上有价格、计数器、数据表格这个也要留liga是连字Montserrat 的连字用得不多但留着没坏处。--flavorwoff2指定输出格式需要brotli支持。做完这一步体积通常能从 50 KB 压到 25–35 KB效果很直接。提示子集化之后一定要肉眼验证一遍特殊字符。我吃过一次亏——把U2018-201D弯引号漏掉了结果页面上的英文引号全部回退成系统字体中英文引号样式不一致内容编辑那边反馈了好几次才发现。4.2font-face的每一行都在解决一个问题上面第 3.3 节已经给过一份可变字体的完整声明。这里我把最容易被写错的几个点单独拎出来讲。font-display有五个取值选哪个直接影响首屏体验取值行为适用场景auto由浏览器决定各内核不一致不推荐block先空白最多 3 秒再换字体极少用swap立刻用回退字体显示字体到了再换最通用我默认选这个fallback短暂空白约 100ms后回退3 秒内到了才换标题类可试optional极短等待网络慢就直接用回退字体本次不换追求极致性能时我的默认是swap因为它保证文字永远可见代价是字体加载完会有一次视觉跳动FOUT。要压掉这个跳动靠的是后面 4.4 节的“回退字体调校”不是靠改font-display。斜体要单独声明一份不能和正体混在一个font-face里。如果你不用斜体很多营销页确实不用就别加载斜体文件省下来的体积非常可观。font-face { font-family: Montserrat Variable; src: url(/fonts/montserrat-var-italic-latin.woff2) format(woff2-variations); font-weight: 100 900; font-style: italic; font-display: swap; }4.3 用 CSS 变量把字重体系固化下来这是我最想推荐的一个工程习惯。别在业务代码里到处写font-weight: 600而是在全局定义一套语义化变量:root { --fw-thin: 100; --fw-extralight: 200; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; /* 语义层业务代码用这一层 */ --fw-body: var(--fw-regular); --fw-body-strong: var(--fw-medium); --fw-heading-sm: var(--fw-semibold); --fw-heading-md: var(--fw-bold); --fw-heading-lg: var(--fw-bold); --fw-display: var(--fw-extrabold); --fw-label-caps: var(--fw-semibold); /* 字号阶梯1.25 倍比例 */ --fs-caption: 0.75rem; --fs-small: 0.875rem; --fs-body: 1rem; --fs-lead: 1.125rem; --fs-h4: 1.25rem; --fs-h3: 1.5rem; --fs-h2: 2rem; --fs-h1: 2.75rem; --fs-display: 3.5rem; /* 字距 */ --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.08em; }这套变量的好处等你要做深色模式、要做品牌换肤、要做响应式字重微调的时候就会体现出来——改一处全站生效。我做过一个项目中期客户突然说“整体感觉太重了”如果当初是散落在各处的硬编码字重那天晚上九点前根本改不完有了语义变量改四行就交付了。使用的时候写.card__title { font-family: Montserrat Variable, system-ui, sans-serif; font-size: var(--fs-h4); font-weight: var(--fw-heading-sm); line-height: 1.35; letter-spacing: var(--ls-normal); } .section__eyebrow { font-family: Montserrat Variable, system-ui, sans-serif; font-size: var(--fs-caption); font-weight: var(--fw-label-caps); letter-spacing: var(--ls-wide); text-transform: uppercase; }4.4 首屏性能与布局抖动真正的坑在这里字体换上去那一下的视觉跳动行内叫 FOUT字体未加载完先显示回退字体造成的闪烁。解决它的核心思路不是“让字体来得更快”而是“让回退字体长得更像 Montserrat”。具体做法是给回退字体加尺寸缩放font-face { font-family: Montserrat Fallback; src: local(Arial), local(Helvetica); size-adjust: 97%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }size-adjust是核心参数它把回退字体的整体比例缩放到与目标字体接近。上面这几个数值是根据 Montserrat 与常见系统无衬线的字面比例估算出来的起点实际项目里我建议你用一个在线字体回退计算工具生成精确值或者手动微调后在真机上对比。另外还有两件事要做一是预加载首屏必须用到的那个字体文件二是别加载用不到的字符集。link relpreload href/fonts/montserrat-subset.woff2 asfont typefont/woff2 crossoriginanonymouscrossorigin这个属性不能省。字体请求默认是跨域模式漏掉它浏览器会重新发一次请求预加载就白做了——这个坑我至少见过三次每次都是在排查“为什么预加载没生效”时才发现的。注意别给所有字体文件都加preload。预加载是抢占带宽的高优先级行为只对首屏立刻要用的一份文件用其余交给正常加载流程。5. 设计端的排版参数与字距微调设计稿上的 Montserrat 和代码里的 Montserrat 经常长得不一样原因往往不在字体本身而在参数没对齐。这一节讲的是设计侧最容易出问题的几个地方。5.1 行高、字距、字重三件套的关系很多人把行高当成一个独立的、凭感觉给的数值。但在几何无衬线里行高和字号的关系是强绑定的。Montserrat 的 x-height 偏高这意味着同样字号下它的“视觉体积”比很多字体更大行高给得太紧就会显得拥挤。我的经验区间大标题≥32px行高 1.1–1.2字号越大越接近 1.1中等标题20–30px行高 1.25–1.35正文15–17px行高 1.6–1.75理想值通常在字号的 1.7 倍左右小字≤14px行高 1.5–1.6但不要低于 1.5否则多行会粘连还有一个细节Montserrat 的默认行间距leading本身是偏松的在某些设计软件里打开会发现自动行高已经接近 1.3。如果你是照着软件默认值走到了代码里再用 1.5 的行高观感就对不上。我的处理方式是在设计文件里统一把行高改成百分比或具体倍数不用“自动”这样和 CSS 一一对应。5.2 大字号必须做字距补偿这是质感的分水岭这条是我认为最能拉开新手和熟手差距的一个细节。几何无衬线在大字号下有个通病字母间距会显得比小字号时更松。原因是小字号时你看到的是一片整体的字形块大字号时你看到的是一个个独立的字母每个字母周围的空白都被放大了。所以大标题必须做负字距补偿。参考值字号字距调整理由16px 以下0 或 0.005em不需要补偿甚至可以略松20–32px-0.005em 到 -0.01em轻微收紧36–48px-0.015em 到 -0.02em明显收紧56px 以上-0.02em 到 -0.03em必须收紧否则松散我做过一个对比测试同一个 64px 的标题字距 0 和 -0.025em 的差别在投影上看几乎就是“业余”和“专业”的区别。字距为 0 的那版字母之间像被人为撑开了收紧之后的版本整行字有一个整体轮廓视觉重心是聚的。反过来全大写的短标签必须加正字距前面表格里给过 0.08em 到 0.12em这个不要搞反。标题收紧、大写放开记住这八个字就够了。5.3 中英混排与数字对齐Montserrat 不包含中文字形这是所有中文项目的必答题。浏览器遇到中文会自动回退到系统字体或你指定的下一款字体但这里有两个隐藏问题。第一是字重断层。你给标题设了 Montserrat 900中文字符回退到系统字体而系统字体往往只有 Regular 和 Bold 两档浏览器就会做合成加粗synthetic bold也就是把字形机械地横向拉伸。结果就是英文非常黑、中文只是略微加粗两者放在一起特别割裂。解决办法有两个一是标题里尽量别用 900控制在 700 以内减少断层二是显式指定一款字重齐全的中文回退字体并在 CSS 里写清楚。.title { font-family: Montserrat Variable, Noto Sans SC, system-ui, sans-serif; font-weight: var(--fw-bold); }第二是基线对齐。不同字体的基线和 x-height 不一样中英文混排时经常出现英文“浮”在上面或者“沉”在下面。这个在 Montserrat 上尤其明显因为它的 x-height 偏高。实测下来给中文字体加一点点size-adjust95%–100% 之间通常能改善对齐但这属于精修得看具体搭配。数字对齐相对简单。Montserrat 的数字本身接近等宽做价格、计数器、数据看板时视觉很稳。但如果同一页面上混用了其他字体记得显式写font-variant-numeric: tabular-nums;把数字宽度统一锁死避免刷新时数字宽度跳动导致内容左右晃。6. 问题排查实录与速查表这一节是我这几年遇到过的真实问题汇总按现象归类方便你直接查。6.1 现象、原因、解法对照表现象最可能的原因解法字体完全没生效还是系统字路径写错 / 文件名大小写不一致 / 跨域被拦打开开发者工具的字体面板看请求状态重点查 404 和 CORS字重变了但看起来像假的加粗声明里没写font-weight: 100 900区间补上区间声明确保浏览器知道文件覆盖全档大标题的字看起来松散没做负字距补偿按第 5.2 节的表格加letter-spacing首屏有明显的文字跳动回退字体与目标字体尺寸差异大加font-face的size-adjust与ascent-override中文部分粗细不对回退字体字重不全触发合成加粗换一款字重齐全的中文回退字体或降低标题字重全大写小标签挤成一团没加正字距letter-spacing: 0.08em起步页面加载慢字体请求很靠后没预加载且加载了多份无用字重只预加载一份其余按需去掉多余静态字重导出的 PDF 字重全变成常规体导出环节不支持可变字重轴设计稿用静态字体或导出前转曲字体在移动端比桌面端“瘦”移动端触发了一次额外的合成渲染检查是否重复声明了同名字体或有text-rendering干扰数字刷新时宽度跳动数字未锁定等宽font-variant-numeric: tabular-nums6.2 几条没写进文档、但很值钱的经验第一别在项目里同时存在“静态版”和“可变版”的同名字体。这是最隐蔽的一个问题你从旧项目拷过来一段font-face又从新模板粘了一段可变字体的声明两个都叫Montserrat浏览器会挑它认为最匹配的那个结果就是某些字重正常、某些字重诡异。我遇到过一整个页面只有 700 有问题其他都正常查了两个小时才发现是两份声明打架。给可变字体单独起个名字比如Montserrat Variable能彻底规避这个问题。第二字体子集化的字符范围要跟内容团队对齐。我做过一个营销页内容用的是纯英文子集化时只留了 ASCII。上线一周后运营加了几个 emoji 和特殊符号比如箭头、破折号、®, ™全部回退成系统字体视觉上像打了补丁。后来我的做法是子集化的字符表统一从一个共享文件里取运营改了内容就同步更新字符表重新生成一次。多花十分钟省掉无数次返工。第三字重选择要在真实设备上验证不要只看设计稿和桌面显示器。高分辨率屏和普通屏对字重的呈现差异很大尤其是 500 和 600 这两档在低分辨率屏上经常糊在一起。我的习惯是上线前用手机和一台普通办公显示器各看一遍重点看导航和按钮文字——这两处最容易出问题。第四给字体加载做一次“慢网络模拟”。开发者工具里把网络限制到慢速 3G看看首屏是什么样。很多字体相关的问题只有在慢网络下才暴露比如文字先以回退字体显示、然后整页重排一次用户观感很差。这次测试能帮你在上线前就发现并修掉这类问题。第五可变字体的字重不要取太“怪”的值。技术上你可以取 437但视觉上它和 450 的差别微乎其微反而让你在设计稿和代码之间对不齐。我现在的习惯是只在需要微调的少数几个位置用非整百值比如深色模式下的 570、响应式大屏的 620其余一律用整百保证设计和开发能对得上号。第六把用到的字重清单写进项目文档。这条听起来很无聊但真的能救命。项目交接时下一个人看到font-weight: 620会一脸懵不知道这个值是有意设计的还是随手写的。在文档里写一行“620 是深色模式专用字重用于抵消视觉膨胀”能省掉后面无数轮沟通。最后分享一个小技巧如果你不确定某个字号下该用哪一档字重最快的验证方法是把同一段文字用 400、500、600 三档并排放在一起缩到实际显示尺寸然后眯起眼睛看——如果分不清哪行更重说明差距不够往上跳一档如果某一行明显抢眼说明差距过大往下调一档。这个方法比任何对照表都直观因为它模拟的是用户真实的扫读状态。我用这个笨办法定了好几个项目的字重体系至今没翻过车。
1. Montserrat 到底是什么凭什么被用烂了如果你最近在接手品牌官网、SaaS 后台或者电商详情页翻开源码或者设计稿十有八九会撞见 Montserrat 这个名字。它几乎成了“现代几何无衬线”这个类别的默认答案免费商用、九档字重、还带可变字体版本一套文件能撑起从超大标题到正文注释的全部层级。这篇文章就是想把这款字体从头到尾讲透——它是什么来路、九档字重在实际项目里怎么分工、可变字体和静态字体到底该选哪一套、Web 端怎么落地才不掉性能、排版参数怎么调才不像新手。适合刚入行的设计师和前端也适合已经用了两三年但一直只会font-weight: 700一个值走天下的老手。我自己的经历挺典型最开始用它纯粹是因为它免费、名字好记随便一贴就能出效果后来做多了才发现真正难的不是“用上”而是“用对”。同样一款 Montserrat有人排出来干净利落有人排出来像 PPT 模板差别基本都在字重搭配、字距微调和加载策略这三个地方。这三块内容我会在下面拆得比较细能直接抄的部分我都会给出可以直接粘贴的代码和参数。1.1 它其实是从一块户外导视牌里长出来的Montserrat 的身世比很多人想的要有意思。它最初并不是为了做网页字体而设计的而是为南美某座城市一个城区的公共导视系统做的定制字形后来设计者觉得这套骨架有普适价值才把它整理成完整的字族公开发布。这个出身非常关键它解释了为什么这款字体在大字号、短文本、强识别的场景下表现特别好——导视牌要在十几米外被人一眼看清字形必须简洁、开口大、笔画均匀。所以你去看它的字母结构a是单层的圆碗g是单层的t的顶部是平的而不是斜切的M的两条腿几乎垂直R的腿部是一条干脆的直线。所有这些都是为了“远距离识别”服务的。反过来说这也意味着它不是一款为长文阅读优化过的字体——大段正文用它读久了眼睛会累因为几何骨架缺少足够的笔画对比来引导视线。我在实际项目里的做法是Montserrat 负责所有“被看见”的地方比如主标题、按钮、数字、导航、徽标文字正文则交给一套更适合长读的字体或者干脆用系统默认。这个分工思路后面几节会反复用到。提示判断一款字体适合标题还是正文一个简单的测试方法是把它缩小到 14px 左右连续读三段 200 字的中文混排英文如果开始觉得“字挤在一起”或者“每条笔画都一样粗”那它就只适合做标题。1.2 免费商用的边界很多人其实理解错了这是被问得最多的问题“Montserrat 能不能免费商用能不能嵌到 App 里能不能放在客户的产品里卖钱”答案是可以但边界要说清楚。它采用的是开放字体授权协议SIL Open Font License 1.1这个协议的核心条款有四条我用大白话翻译一下条款大白话解释实际影响允许自由使用商用、非商用、印刷、嵌入、二次分发都行客户项目、付费产品、包装印刷都不需要授权费允许修改可以改字形、改间距、做子集化裁剪你可以为品牌做定制版比如把某个字母改掉修改后不能独占你改了以后不能把修改版当成自己独有的字体去卖改完的版本如果对外分发也必须沿用同一协议不能单独售卖字体文件不能把字体文件本身当商品卖卖设计服务、卖模板、卖 App 都没问题卖字体文件不行最容易踩坑的是第四条。有些团队把字体文件打包进“字体素材包”出售这就越界了但把字体嵌进网页、嵌进 App、嵌进 PDF 交付给客户都属于正常使用。还有一个细节修改版比如你裁剪过字符集的子集文件如果对外分发理论上要保留原授权文件和版权声明这一条很多人忽略严格意义上讲是必须做的。注意字体授权协议本身偶尔会更新版本商业项目尤其是大客户项目建议在交付前把当前版本的协议原文下载留档别只凭“我记得它是免费的”这句话。这是我踩过一次坑之后养成的习惯。1.3 骨架特征决定了它能干什么、不能干什么把 Montserrat 和另外几款常见的几何无衬线放在一起看它最明显的三个特征是字碗偏宽、x-height 偏高。这带来的直接效果是小字号下依然清晰但大段排布时字符占位偏多同样的字号下一段 Montserrat 排出来的行数会比用一些窄字体的更多。做多语言版本的页面时这一点会直接影响布局高度。笔画粗细均匀几乎无对比。好处是整体感强、现代感足坏处是缺少“呼吸感”在正文尺寸下容易糊成一片。这就是为什么它的大字号表现远好于小字号。数字是等宽的tabular 风格并且有丰富的数字样式。做价格、数据看板、倒计时、成绩单这类场景它的数字排布非常整齐不会出现“1 比 8 窄一半”的抖动。这一点在做实时刷新的数字组件时特别有用——不用额外设置font-variant-numeric: tabular-nums也能保持稳定当然显式写上更保险。搞清楚这三个特征很多选型问题就自解了数据密集的仪表盘、需要强调的营销页、品牌感强的落地页它很合适长篇小说、法规条文、上千字的说明文档它不合适。2. 九档字重是一套层级系统不是九种花样九档字重100 到 900每 100 一档是 Montserrat 最容易被浪费掉的部分。绝大多数人只用 400 和 700剩下的七档形同虚设。但实际上九档字重的真正价值在于它能让你在不换字体、不换字号的前提下建立起足够细腻的信息层级。这一点在后台系统、数据表格、复杂表单这类“层级多但空间小”的场景里尤其明显。2.1 字重对照表每一档到底该派什么用场先上一张我自己在项目里一直在用的对照表左边是字重右边是我实际会派给它的任务。这张表不是教条但它能帮你避开“所有东西都用 400 和 700”这个新手陷阱。字重名称我给它的实际任务使用频率100Thin超大装饰性标题48px 以上、水印式文字极低200ExtraLight品牌大标题、海报副标题低300Light大号引言、超大数字展示如数据大屏核心指标中低400Regular长文本备用、表格内容、表单说明高500Medium正文强调、导航项、次级标题高600SemiBold卡片标题、按钮文字、标签极高700Bold主标题、板块标题、需要强对比的强调极高800ExtraBold营销页大标题、数字冲击力场景中900Black品牌字形、超大数字、活动主视觉低看这张表你会发现一个规律真正的重活集中在 500、600、700 三档100 到 300 和 800 到 900 是“特种兵”用得少但关键时候不能缺。这也解释了为什么很多人只用两档也“能用”——因为主力确实就那么两三档。但如果你想让页面看起来有质感中间那几档的细腻过渡是省不掉的。我举个具体例子。一个卡片组件里同时存在卡片主标题、卡片副标题、正文摘要、底部操作链接。新手写法是标题 700、其余全 400结果就是标题突兀、层次断裂。我的写法是标题 600、副标题 500、摘要 400、链接 500 加主色。四个层级只用了三档字重但视觉上明显更顺因为它模拟了真实的粗细渐变而不是二值跳变。2.2 字重、字号、行高必须一起调单独调一个必翻车很多人调字重的时候只动字重结果发现“加粗了但不好看”。原因很简单字重变了字面的视觉体积也变了原来的字号和行高就不匹配了。这里有一套我用了很久的经验公式不是数学定理但实测下来基本不会出错字重越高字号越大行高越紧字距越负。反过来字重越低、字号越小行高越松字距越接近 0。具体参数上我的默认起点是这样的场景字号字重行高字距页面主标题40–56px7001.1–1.15-0.02em板块标题28–32px7001.2-0.01em卡片标题18–20px6001.350正文15–16px4001.65–1.750辅助说明13–14px400/5001.60.005em按钮文字14–16px60010.01em全大写小标签11–12px6001.40.08–0.12em最后一行值得单独说。全大写文本比如NEW ARRIVAL、SECTION 01这类小标签在几何无衬线里会显得非常拥挤因为大写字母的间距本来就窄而 Montserrat 的字母又偏宽。这时候必须手动加正字距0.08em 起步字号越小加得越多。我见过太多页面的全大写小标签挤成一坨黑块问题就出在这里。心得字距用em而不是px。用 px 的话一旦响应式字号变化字距就不跟着缩放大屏上看着还行手机上一塌糊涂。这个坑我在早期项目里踩过不止一次。2.3 三个高频字重误用看看你中了几个第一个400 和 500 撞车。在多数屏幕上Regular400和 Medium500的差别非常细微特别是小字号加低分辨率屏。如果你用 400 做正文、500 做次级标题用户在笔记本上根本分不出来层级就白做了。我的处理方式是要么把 500 换成 600拉开差距要么保留 500但配合颜色或背景区分不能只靠字重。第二个900 滥用。Black 这档的存在感太强忍不住就想用。但它在中文混排环境下有个问题——中文回退字体通常没有对应的 900 字重浏览器会做“伪加粗”或者直接降级到最接近的可用字重导致中英文粗细不一致非常难看。解决办法后面第 6 节会讲。第三个用字重代替颜色做强调。有些设计稿里一段正文中的关键词加粗到 700结果整段文字节奏被打乱读起来一卡一卡的。正确的做法是 500 或 600 就够甚至用颜色更有效。字重是层级工具不是强调工具这个区分很重要。3. 可变字体与静态字体到底装哪一套这是近两年问得越来越多的问题。Montserrat 同时提供静态字体每个字重一个文件加斜体一共 18 个和可变字体一个文件包含 100 到 900 的连续字重轴。两者的能力差距是数量级的但代价也不同选错了要么浪费性能要么用不上能力。3.1 技术差异与体积账算一笔真实的账静态字体和可变字体的核心区别用一句话说就是静态是离散的台阶可变是连续的斜坡。静态版本你只能选 100、200、300……这九个整数可变版本你可以取 437、612、850 任意小数虽然视觉上大部分场景用不到这么细但中间值的可用性是实打实的。体积上我实测过一组数据拉丁字符集woff2 格式已做基础子集化方案文件数总体积可覆盖字重静态全量9 档 斜体18约 380–420 KB九个整数档静态裁剪常用 3 档 1 斜体4约 85–100 KB400/600/700可变字体正体1约 45–60 KB100–900 连续可变字体正体 斜体2约 90–110 KB100–900 连续 斜体这张表基本能说明问题可变字体比“全量静态”省 80% 以上体积比“裁剪到三档静态”也只多一点点但能力完全不是一个量级。所以只要目标环境支持可变字体是默认答案。那什么时候还得用静态一是要兼容非常老的浏览器内核二是设计工具或印刷流程对可变字体支持不完整比如某些排版软件导出 PDF 时可变轴会被“拍平”成默认值三是你需要对某一个特定字重做手工微调比如品牌定制版的 700 和标准版不同。这三种情况下静态字体仍然是更稳妥的选择。注意印刷和 PDF 交付场景一定要在导出后抽查一下字重是否保住了。我遇到过一次设计稿里用的是可变字体的 650导出 PDF 后全部变成了 400原因是导出环节不认识字重轴。这种问题在屏幕上完全看不出来只有打样或客户打开 PDF 才会发现。3.2 三个必须上可变字体的真实场景场景一响应式字重。移动端屏幕小、字要放大此时字重应该略降否则大字号加粗体会显得笨重。用可变字体可以写font-variation-settings: wght 620配合媒体查询在大屏上调到 680。如果只有静态字体你只能在 600 和 700 之间硬跳中间那个“刚刚好”的值永远拿不到。场景二滚动联动效果。一些营销页会做标题随滚动逐渐变粗的动效。可变字体可以直接把wght轴接到滚动进度上丝滑连续静态字体只能一帧一帧跳档视觉上就是“卡”。场景三品牌色/字重的主题切换。深色模式下同样的字重看起来会更粗因为亮字压暗底会有视觉膨胀这时候把字重从 600 降到 570 就能让两种模式的观感一致。这种微调只有可变字体做得到。3.3 兼容兜底一条不能省的写法可变字体的兼容写法有几种我推荐的是“font-weight声明区间 format(woff2-variations)”这一套原因是它能让浏览器自动把font-weight属性映射到wght轴上你在 CSS 里写font-weight: 650就能生效不需要到处写font-variation-settings。font-face { font-family: Montserrat Variable; src: url(/fonts/montserrat-var-latin.woff2) format(woff2-variations), url(/fonts/montserrat-var-latin.woff2) format(woff2); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U0000-00FF, U0131, U0152-0153, U02BB-02BC, U2000-206F, U2074, U20AC, U2122, U2191, U2193; }font-weight: 100 900这行是关键它告诉浏览器“这个文件覆盖整个区间”。写font-weight: normal或者只写一个值浏览器就会误判导致你写 650 时又去触发一次合成加粗效果就毁了。unicode-range也不能省。它明确告诉浏览器这份文件只负责拉丁字符遇到中文时直接走回退字体避免浏览器下载了一堆用不上的字节还拖慢渲染。4. Web 端从头到尾的落地流程这一节是纯操作部分从拿到文件到上线我会把每一步的参数和理由都写清楚。你可以直接照着做也可以只看自己缺的那一步。4.1 取文件、做子集、控体积从开源字体托管平台下载下来的是一个压缩包里面通常有三种格式TTF桌面用、WOFF老 Web 格式、WOFF2现代 Web 格式压缩率最高。Web 端只用 WOFF2其余全部丢掉别为了“兼容性”把 TTF 也挂上去那等于白白多下载几百 KB。下载下来直接塞进项目通常体积是 100 KB 级别拉丁字符集。对于追求首屏速度的项目还能再裁剪一刀——把用不到的字符去掉。如果你的站点是纯英文加数字用不到西里尔字母、希腊字母那就用fonttools做一次子集化# 安装工具 pip install fonttools brotli # 只保留 ASCII 常用字符 少量符号 pyftsubset Montserrat-VariableFont_wght.ttf \ --unicodesU0020-007E,U00A0-00FF,U2018-201D,U2026,U20AC \ --layout-featureskern,liga,calt,tnum \ --flavorwoff2 \ --output-filemontserrat-subset.woff2这里几个参数值得解释一下。--layout-features里的kern是字距调整必须留否则字母间距会变得很难看tnum是等宽数字如果你的页面上有价格、计数器、数据表格这个也要留liga是连字Montserrat 的连字用得不多但留着没坏处。--flavorwoff2指定输出格式需要brotli支持。做完这一步体积通常能从 50 KB 压到 25–35 KB效果很直接。提示子集化之后一定要肉眼验证一遍特殊字符。我吃过一次亏——把U2018-201D弯引号漏掉了结果页面上的英文引号全部回退成系统字体中英文引号样式不一致内容编辑那边反馈了好几次才发现。4.2font-face的每一行都在解决一个问题上面第 3.3 节已经给过一份可变字体的完整声明。这里我把最容易被写错的几个点单独拎出来讲。font-display有五个取值选哪个直接影响首屏体验取值行为适用场景auto由浏览器决定各内核不一致不推荐block先空白最多 3 秒再换字体极少用swap立刻用回退字体显示字体到了再换最通用我默认选这个fallback短暂空白约 100ms后回退3 秒内到了才换标题类可试optional极短等待网络慢就直接用回退字体本次不换追求极致性能时我的默认是swap因为它保证文字永远可见代价是字体加载完会有一次视觉跳动FOUT。要压掉这个跳动靠的是后面 4.4 节的“回退字体调校”不是靠改font-display。斜体要单独声明一份不能和正体混在一个font-face里。如果你不用斜体很多营销页确实不用就别加载斜体文件省下来的体积非常可观。font-face { font-family: Montserrat Variable; src: url(/fonts/montserrat-var-italic-latin.woff2) format(woff2-variations); font-weight: 100 900; font-style: italic; font-display: swap; }4.3 用 CSS 变量把字重体系固化下来这是我最想推荐的一个工程习惯。别在业务代码里到处写font-weight: 600而是在全局定义一套语义化变量:root { --fw-thin: 100; --fw-extralight: 200; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; /* 语义层业务代码用这一层 */ --fw-body: var(--fw-regular); --fw-body-strong: var(--fw-medium); --fw-heading-sm: var(--fw-semibold); --fw-heading-md: var(--fw-bold); --fw-heading-lg: var(--fw-bold); --fw-display: var(--fw-extrabold); --fw-label-caps: var(--fw-semibold); /* 字号阶梯1.25 倍比例 */ --fs-caption: 0.75rem; --fs-small: 0.875rem; --fs-body: 1rem; --fs-lead: 1.125rem; --fs-h4: 1.25rem; --fs-h3: 1.5rem; --fs-h2: 2rem; --fs-h1: 2.75rem; --fs-display: 3.5rem; /* 字距 */ --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.08em; }这套变量的好处等你要做深色模式、要做品牌换肤、要做响应式字重微调的时候就会体现出来——改一处全站生效。我做过一个项目中期客户突然说“整体感觉太重了”如果当初是散落在各处的硬编码字重那天晚上九点前根本改不完有了语义变量改四行就交付了。使用的时候写.card__title { font-family: Montserrat Variable, system-ui, sans-serif; font-size: var(--fs-h4); font-weight: var(--fw-heading-sm); line-height: 1.35; letter-spacing: var(--ls-normal); } .section__eyebrow { font-family: Montserrat Variable, system-ui, sans-serif; font-size: var(--fs-caption); font-weight: var(--fw-label-caps); letter-spacing: var(--ls-wide); text-transform: uppercase; }4.4 首屏性能与布局抖动真正的坑在这里字体换上去那一下的视觉跳动行内叫 FOUT字体未加载完先显示回退字体造成的闪烁。解决它的核心思路不是“让字体来得更快”而是“让回退字体长得更像 Montserrat”。具体做法是给回退字体加尺寸缩放font-face { font-family: Montserrat Fallback; src: local(Arial), local(Helvetica); size-adjust: 97%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }size-adjust是核心参数它把回退字体的整体比例缩放到与目标字体接近。上面这几个数值是根据 Montserrat 与常见系统无衬线的字面比例估算出来的起点实际项目里我建议你用一个在线字体回退计算工具生成精确值或者手动微调后在真机上对比。另外还有两件事要做一是预加载首屏必须用到的那个字体文件二是别加载用不到的字符集。link relpreload href/fonts/montserrat-subset.woff2 asfont typefont/woff2 crossoriginanonymouscrossorigin这个属性不能省。字体请求默认是跨域模式漏掉它浏览器会重新发一次请求预加载就白做了——这个坑我至少见过三次每次都是在排查“为什么预加载没生效”时才发现的。注意别给所有字体文件都加preload。预加载是抢占带宽的高优先级行为只对首屏立刻要用的一份文件用其余交给正常加载流程。5. 设计端的排版参数与字距微调设计稿上的 Montserrat 和代码里的 Montserrat 经常长得不一样原因往往不在字体本身而在参数没对齐。这一节讲的是设计侧最容易出问题的几个地方。5.1 行高、字距、字重三件套的关系很多人把行高当成一个独立的、凭感觉给的数值。但在几何无衬线里行高和字号的关系是强绑定的。Montserrat 的 x-height 偏高这意味着同样字号下它的“视觉体积”比很多字体更大行高给得太紧就会显得拥挤。我的经验区间大标题≥32px行高 1.1–1.2字号越大越接近 1.1中等标题20–30px行高 1.25–1.35正文15–17px行高 1.6–1.75理想值通常在字号的 1.7 倍左右小字≤14px行高 1.5–1.6但不要低于 1.5否则多行会粘连还有一个细节Montserrat 的默认行间距leading本身是偏松的在某些设计软件里打开会发现自动行高已经接近 1.3。如果你是照着软件默认值走到了代码里再用 1.5 的行高观感就对不上。我的处理方式是在设计文件里统一把行高改成百分比或具体倍数不用“自动”这样和 CSS 一一对应。5.2 大字号必须做字距补偿这是质感的分水岭这条是我认为最能拉开新手和熟手差距的一个细节。几何无衬线在大字号下有个通病字母间距会显得比小字号时更松。原因是小字号时你看到的是一片整体的字形块大字号时你看到的是一个个独立的字母每个字母周围的空白都被放大了。所以大标题必须做负字距补偿。参考值字号字距调整理由16px 以下0 或 0.005em不需要补偿甚至可以略松20–32px-0.005em 到 -0.01em轻微收紧36–48px-0.015em 到 -0.02em明显收紧56px 以上-0.02em 到 -0.03em必须收紧否则松散我做过一个对比测试同一个 64px 的标题字距 0 和 -0.025em 的差别在投影上看几乎就是“业余”和“专业”的区别。字距为 0 的那版字母之间像被人为撑开了收紧之后的版本整行字有一个整体轮廓视觉重心是聚的。反过来全大写的短标签必须加正字距前面表格里给过 0.08em 到 0.12em这个不要搞反。标题收紧、大写放开记住这八个字就够了。5.3 中英混排与数字对齐Montserrat 不包含中文字形这是所有中文项目的必答题。浏览器遇到中文会自动回退到系统字体或你指定的下一款字体但这里有两个隐藏问题。第一是字重断层。你给标题设了 Montserrat 900中文字符回退到系统字体而系统字体往往只有 Regular 和 Bold 两档浏览器就会做合成加粗synthetic bold也就是把字形机械地横向拉伸。结果就是英文非常黑、中文只是略微加粗两者放在一起特别割裂。解决办法有两个一是标题里尽量别用 900控制在 700 以内减少断层二是显式指定一款字重齐全的中文回退字体并在 CSS 里写清楚。.title { font-family: Montserrat Variable, Noto Sans SC, system-ui, sans-serif; font-weight: var(--fw-bold); }第二是基线对齐。不同字体的基线和 x-height 不一样中英文混排时经常出现英文“浮”在上面或者“沉”在下面。这个在 Montserrat 上尤其明显因为它的 x-height 偏高。实测下来给中文字体加一点点size-adjust95%–100% 之间通常能改善对齐但这属于精修得看具体搭配。数字对齐相对简单。Montserrat 的数字本身接近等宽做价格、计数器、数据看板时视觉很稳。但如果同一页面上混用了其他字体记得显式写font-variant-numeric: tabular-nums;把数字宽度统一锁死避免刷新时数字宽度跳动导致内容左右晃。6. 问题排查实录与速查表这一节是我这几年遇到过的真实问题汇总按现象归类方便你直接查。6.1 现象、原因、解法对照表现象最可能的原因解法字体完全没生效还是系统字路径写错 / 文件名大小写不一致 / 跨域被拦打开开发者工具的字体面板看请求状态重点查 404 和 CORS字重变了但看起来像假的加粗声明里没写font-weight: 100 900区间补上区间声明确保浏览器知道文件覆盖全档大标题的字看起来松散没做负字距补偿按第 5.2 节的表格加letter-spacing首屏有明显的文字跳动回退字体与目标字体尺寸差异大加font-face的size-adjust与ascent-override中文部分粗细不对回退字体字重不全触发合成加粗换一款字重齐全的中文回退字体或降低标题字重全大写小标签挤成一团没加正字距letter-spacing: 0.08em起步页面加载慢字体请求很靠后没预加载且加载了多份无用字重只预加载一份其余按需去掉多余静态字重导出的 PDF 字重全变成常规体导出环节不支持可变字重轴设计稿用静态字体或导出前转曲字体在移动端比桌面端“瘦”移动端触发了一次额外的合成渲染检查是否重复声明了同名字体或有text-rendering干扰数字刷新时宽度跳动数字未锁定等宽font-variant-numeric: tabular-nums6.2 几条没写进文档、但很值钱的经验第一别在项目里同时存在“静态版”和“可变版”的同名字体。这是最隐蔽的一个问题你从旧项目拷过来一段font-face又从新模板粘了一段可变字体的声明两个都叫Montserrat浏览器会挑它认为最匹配的那个结果就是某些字重正常、某些字重诡异。我遇到过一整个页面只有 700 有问题其他都正常查了两个小时才发现是两份声明打架。给可变字体单独起个名字比如Montserrat Variable能彻底规避这个问题。第二字体子集化的字符范围要跟内容团队对齐。我做过一个营销页内容用的是纯英文子集化时只留了 ASCII。上线一周后运营加了几个 emoji 和特殊符号比如箭头、破折号、®, ™全部回退成系统字体视觉上像打了补丁。后来我的做法是子集化的字符表统一从一个共享文件里取运营改了内容就同步更新字符表重新生成一次。多花十分钟省掉无数次返工。第三字重选择要在真实设备上验证不要只看设计稿和桌面显示器。高分辨率屏和普通屏对字重的呈现差异很大尤其是 500 和 600 这两档在低分辨率屏上经常糊在一起。我的习惯是上线前用手机和一台普通办公显示器各看一遍重点看导航和按钮文字——这两处最容易出问题。第四给字体加载做一次“慢网络模拟”。开发者工具里把网络限制到慢速 3G看看首屏是什么样。很多字体相关的问题只有在慢网络下才暴露比如文字先以回退字体显示、然后整页重排一次用户观感很差。这次测试能帮你在上线前就发现并修掉这类问题。第五可变字体的字重不要取太“怪”的值。技术上你可以取 437但视觉上它和 450 的差别微乎其微反而让你在设计稿和代码之间对不齐。我现在的习惯是只在需要微调的少数几个位置用非整百值比如深色模式下的 570、响应式大屏的 620其余一律用整百保证设计和开发能对得上号。第六把用到的字重清单写进项目文档。这条听起来很无聊但真的能救命。项目交接时下一个人看到font-weight: 620会一脸懵不知道这个值是有意设计的还是随手写的。在文档里写一行“620 是深色模式专用字重用于抵消视觉膨胀”能省掉后面无数轮沟通。最后分享一个小技巧如果你不确定某个字号下该用哪一档字重最快的验证方法是把同一段文字用 400、500、600 三档并排放在一起缩到实际显示尺寸然后眯起眼睛看——如果分不清哪行更重说明差距不够往上跳一档如果某一行明显抢眼说明差距过大往下调一档。这个方法比任何对照表都直观因为它模拟的是用户真实的扫读状态。我用这个笨办法定了好几个项目的字重体系至今没翻过车。
