font-size-adjust
属性的作用是根据字体的 aspect value 来调整字体大小,而不是根据字体的大小。
aspect value 指的是小写字母x的高度(x-height)与字体大小的比率。不同的字体即使大小相同,它们的 x-height 也可能不同。这会导致在替换字体时,文本的视觉大小出现不一致的情况。
font-size-adjust
属性允许开发者通过指定 aspect value 来保持文本的视觉大小一致,即使字体发生了变化。 浏览器会根据指定的 aspect value 和新字体的实际 aspect value 来调整字体大小,以尽可能匹配原始字体的视觉大小。
例如,如果原始字体的大小为 16px,aspect value 为 0.5,而新字体的 aspect value 为 0.4,浏览器会将新字体的大小调整为 20px (16 * 0.5 / 0.4),以保持 x-height 和整体视觉大小的一致性。
用法:
font-size-adjust: none | <number>;
none
: 默认值,不进行调整。<number>
: aspect value,一个无单位的数值。
示例:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
font-size-adjust: 0.5; /* Helvetica Neue 的 aspect value 大约为 0.5 */
}
如果用户的系统中没有 Helvetica Neue,浏览器可能会使用 Arial 作为替代字体。 Arial 的 aspect value 通常比 Helvetica Neue 小,因此 font-size-adjust: 0.5
会使浏览器略微增大 Arial 的字体大小,以保持文本的视觉大小与使用 Helvetica Neue 时相近。
浏览器兼容性:
font-size-adjust
属性的浏览器兼容性很差,只有少数浏览器支持,而且在某些浏览器中已经被弃用。因此,在实际项目中使用 font-size-adjust
需要谨慎,并进行充分的测试。 更推荐使用其他方法来控制字体大小和外观,例如使用更通用的字体栈,或者使用 @font-face
引入自定义字体。