R3.13.2font-synthesis设计

伪造字重与斜体会改变文字的可读性

别名: faux-bold · faux-italic · 伪粗 · 伪斜 · synthetic bold

概念解释

样式请求了 font-weight: 700italic,但只装了 Regular 这一件时,光栅器会用加粗描边和倾斜变换去伪造出粗体和斜体。font-synthesis 默认是开的。伪造字重让笔画变肥、字腔变小、对比变糊;伪造斜体把直立骨架扭斜,汉字、假名尤其容易挤成一团。这不是「还没换到目标字体所以闪了一下」,也不是两件真实字体度量不同引起的重排——同一套度量下,可读性被合成字形改掉了。

机制

TrueType / OpenType 的粗体和斜体是另画的轮廓:粗体加的是字形设计里的对比和字腔,斜体是 italic 骨架或专门的 obliqued 设计。合成算法没有这些轮廓,只能把 Regular 的轮廓向外扩一圈(faux-bold)或做几何切变(faux-italic / oblique)。扩圈之后细笔画和粗笔画一起变厚,原本靠对比辨认的字(l / I / 1、一 / 二、偏旁)糊在一起;切变让竖笔变斜,横向度量几乎不变,汉字的方块结构被压成平行四边形,邻近笔画粘连。屏幕上再经过 hinting 和抗锯齿,小字号上的伪粗会糊成色块。

font-synthesis: none(或分别关掉 weight / style)会让缺件时的文字保持 Regular 的清晰轮廓,代价是视觉字重不够。可变字体用同一文件插值出 700,不是合成;那是真实轮廓的中间态,可读性损失通常小于扩圈。缺的若是整件字体而不是字重,走的是 FOIT/FOUT,不是 synthesis。

边界

西文无衬线在大字号海报上,轻微 oblique 有时可以接受;正文、表单、中文界面上几乎不可接受。用户代理样式把 <b> <strong> <em> <i> 映到 700 / italic,作者没写字重也会触发合成——关掉 synthesis 时这些标签会看起来「没加粗」,需要真的 700 文件或改映射。图标字体、符号字体被合成后会变形失真,应禁止 synthesis。打印分辨率高,伪粗的糊相对轻,但不能反过来假设屏幕上也轻。可变字体若只声明了 100–400 的轴范围,请求 700 仍可能走合成,不是「有可变就安全」。

怎么落地

  • 为真正用到的字重和斜体提供对应文件或可变轴范围;正文、导航、按钮的 600/700 不要寄希望于合成。
  • 在品牌字体上设 font-synthesis: none 或至少关掉中文的 style 合成;需要强调时改用颜色、字号或真实字重。
  • 检查用户代理对 strong / em 的映射,缺件时要么加载对应面,要么不要把强调写成依赖合成的标签。
  • 验证:只保留 Regular,强制加载带 font-weight: 700italic 的页面,把合成结果与真 700 / 真 italic 并排。小字号正文里辨认易混字(Il1、偏旁)。若合成明显更糊或汉字骨架扭曲,缺件就不能上线。

延伸

  • 同组R3.13.1 不可见文本与换字闪烁是同一取舍的两端 · R3.13.3 图标字体加载失败会留下无意义字符
  • 相邻R3.06 字体加载
  • 站内检索font-synthesis · faux-bold · faux-italic · synthetic bold

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/R3.13.2