标签： synthesis

各位观众老爷，大家好！今天咱们来聊聊CSS font-synthesis 这个有点冷门但关键时刻能救命的属性，特别是它的 weight, style, 和 small-caps 这三个小伙伴。这玩意儿涉及到浏览器如何“脑补”缺失的字体变体，属于底层实现细节，了解一下绝对不亏。 开场白：字体家族的那些事儿 话说，咱们在网页上显示文字，得先有字体吧？字体家族就像一个大家庭，里面有不同的成员，比如“微软雅黑”这个大家族，可能包含“微软雅黑 Regular（常规）”，“微软雅黑 Bold（加粗）”，“微软雅黑 Italic（斜体）”等等。 问题来了，如果设计师想要用一个特定的字体变体（比如“微软雅黑 ExtraBold Italic”），但是用户的电脑上偏偏没有这个变体，那怎么办？难道显示一片空白？ 这时候，font-synthesis 就登场了！它告诉浏览器，如果找不到完全匹配的字体变体，能不能尝试“合成”一个出来。 font-synthesis 的语法 font-synthesis 属性可以接受以下值： none: 禁用所有字体的合成。浏览器必须完全匹配字体，否则就用默认字体显示。 wei …

继续阅读“CSS `font-synthesis` `weight` / `style` / `small-caps` 的浏览器实现细节”

咳咳，各位听众朋友们，老司机发车了！今天咱们聊点CSS里不太起眼，但偶尔会让你抓耳挠腮的小家伙——font-synthesis。这玩意儿是干啥的呢？简单来说，就是当字体本身没有某些特性（比如小型大写字母、下划线）的时候，浏览器能不能“强行”给你模拟出来。 一、啥是字体合成？为啥需要它？ 咱们先得理解一个概念：字体库不是万能的。一个字体文件（比如Arial.ttf）里面可能只包含了最基础的字符，以及一些常用的字重（font-weight，比如normal、bold）和字形（font-style，比如normal、italic）。但很多字体并不包含所有你想用的特性，比如： 小型大写字母（Small Caps）： 看起来像大写字母，但高度和普通小写字母差不多。 粗体（Bold）： 比普通字重更粗的字体。 斜体（Italic）： 倾斜的字体。 下划线（Underline）： 在文字下方添加的一条线。 如果字体库里没有这些特性，浏览器默认情况下会怎么做？ 小型大写字母： 大部分浏览器会直接把小写字母放大，然后降低字重来模拟，但效果往往很丑。 粗体： 浏览器会尝试通过增加像素点的宽度来加粗字体，结 …

继续阅读“CSS `font-synthesis` (`small-caps`, `underline`)：缺失字体特性的合成与渲染”