CSS font-size-adjust Property
Example
By using the font-size-adjust property, the browser will adjust the font size to retain the same aspect value across fonts ("Verdana" has the aspect value of 0.545):
.verdana {
font-family: Verdana, sans-serif;
font-size:
15px;
}
.times {
font-family: Times, serif;
font-size: 15px;
}
.adjust {
font-size-adjust: 0.545;
}
Try it Yourself »
Definition and Usage
The font-size-adjust property is used to
preserve the readability and size of text, when fallback font occurs.
Two fonts (which is set to the same size), can take up a very different amount of space. E.g. Text in Verdana 15px will be bigger than the same text showed in a 15px Times font.
So, when a font is not available, the browser uses the second or third specified font. This could result in a big change for the font size.
The font-size-adjust property lets you
adjust your fallback font to better match the first font, in size.
All fonts have an aspect value. The aspect value is the size-difference between the lowercase letter "x" and the uppercase letter "X".
When the browser knows the aspect value for the first selected font, the browser can adjust the font-size when displaying text with the second-choice font.
| Default value: | none |
|---|---|
| Inherited: | yes |
| Animatable: | yes. Read about animatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.fontSizeAdjust="0.545" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| font-size-adjust | 127 | 127 | 3 | 17 | 113 |
Syntax
font-size-adjust: number|none|initial|inherit;
Property Values
| Value | Description |
|---|---|
| number | Defines the aspect value to use |
| none | Default value. No font size adjustment |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Related Pages
HTML DOM reference: fontSizeAdjust property
