When the font which we have specified in the font-family property is not available or not supported by the browser, the next specified font is used as a fallback. This could result in a bigger or smaller font size. To overcome this problem we use the font-size-adjust property which preserves the font size regardless of the font.
The font-size-adjust property takes aspect ratio as a value, which is the ratio of lowercase font height to uppercase font height.
In the example below, the lowercase letters’ font height will be maintained as 8px(16*0.5) regardless of the fonts used. If the browser does not support font-size-adjust property, the 16px fonts will be used. Try it out:
Example:
.p1{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-size-adjust: 0.5;
}
.p2{
font-family: "Times New Roman", Times, serif;
font-size: 16px;
font-size-adjust: 0.5;
}
CSS Syntax
The font-size-adjust property has the following syntax:
font-size-adjust: none|number|initial|inherit;
Property Values
The font-size-adjust property accepts the following values:
| none | This is the default value. Specifies no font size adjustment. |
| number | Specifies the aspect value which is used to adjust the font size. |
| initial | Sets the font-size-adjust property to its default value(none). |
| inherit | Inherits the font-size-adjust property from the parent element. |
General Info
| Default Value | none |
| Inherited | Yes |
| JavaScript Usage | element.style.fontSizeAdjust = “0.5”; |
