CSS - font-size-adjust 属性



CSS 的font-size-adjust属性用于调整元素的字体大小,以便在更改字体系列时保持一致的可读性。它有助于确保文本在不同字体下的显示大小相似,这在使用备用字体时尤其有用。

语法

font-size-adjust: none | number | initial | inherit;

属性值

描述
none 指定不根据 x-height 进行字体大小调整。默认值。
数字 指定一个数值,表示纵横比值,即字体 x-height 与字体系列属性指定的字体 x-height 的比率。
initial 将属性设置为其初始值。
inherit 从父元素继承属性。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS 字体大小调整属性示例

以下示例说明了使用不同值的font-size-adjust属性。

使用 none 值的字体大小调整属性

为了防止根据字体的纵横比进行任何调整,并直接使用指定的字体大小,而不根据字体的 x-height 修改它,我们将font-size-adjust属性的值设置为none。这是默认值。以下示例显示了这一点。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> body { font-family: Arial, sans-serif; font-size: 20px; } .adjusted { font-family: "Georgia", serif; font-size: 20px; font-size-adjust: none; } </style> </head> <body> <h2> CSS font-size-adjust property </h2> <p> This is text using the default font family (Arial) with a font size of 20px. </p> <p class="adjusted"> This is text using Georgia with font-size-adjust set to none. The font size is not adjusted relative to Georgia's x-height. </p> </body> </html>

使用数值的字体大小调整属性

为了确保在使用 x-height 不同的字体切换时文本保持一致的可读性和大小,我们将一个正值(例如 0.25、1 等)指定给font-size-adjust属性。该值确保使用下一个字体渲染的文本与第一个字体的大小一致。以下示例显示了这一点。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> body { font-family: Arial, sans-serif; font-size: 20px; } .adjusted { font-family: "Georgia", serif; font-size: 20px; font-size-adjust: 0.5; } </style> </head> <body> <h2> CSS font-size-adjust property </h2> <p> This is text using the default font family. </p> <p class="adjusted"> This is text using Georgia with font-size-adjust applied. </p> </body> </html>

注意:只有 Firefox 浏览器支持font-size-adjust属性。

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
font-size-adjust 不支持 不支持 3.0 不支持 不支持
css_properties_reference.htm
广告