Style fontSizeAdjustProperty
Style Object
Definition and Usage
The fontSizeAdjust property sets or returns the font aspect value of the text.
All fonts havean aspect value, which is the size difference between the lowercase letter "x" and the uppercase letter "X".
When the first-choice font is unavailable, the fontSizeAdjust property gives you better control over font size. When a font is unavailable, the browser uses the specified second font. This may cause a change in font size. To prevent this, use this property.
When the browser knows the aspect value of the first-choice font, it can calculate the font size to use when displaying text with the second-choice font.
Syntax
Set the fontSizeAdjust property:
Object.style.fontSizeAdjust="none|value|inherit"
Return the fontSizeAdjust property:
Object.style.fontSizeAdjust
| Value | Description |
|---|---|
| none | Default. Do not preserve the x-height of the first-choice font. |
| value | Preserve the x-height of the first-choice font and calculate the aspect value ratio of the font. Formula used: font size of the preferred font * (aspect value of the first-choice font / aspect value of the available font) = font size of the available font Example: If 14px Verdana (aspect value 0.58) is unavailable, but an available font (Times New Roman) has an aspect value of 0.46, then the substitute font size will be 14*(0.58/0.46) = 17.65px. |
| inherit | The value of the fontSizeAdjust property is inherited from the parent element. |
Browser Support
Only Firefox supports the fontSizeAdjust property.
Example
Example
Adjust the font size:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie Tutorial (example.com)</title>
<script>
function displayResult(){
document.getElementById("p1").style.fontSizeAdjust="0.58";
}
</script>
</head>
<body>
<p id="p1">This is some text</p>
<br>
<button type="button" onclick="displayResult()">Adjust font size</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie Tutorial (example.com)</title>
<script>
function displayResult(){
document.getElementById("p1").style.fontSizeAdjust="0.58";
}
</script>
</head>
<body>
<p id="p1">This is some text</p>
<br>
<button type="button" onclick="displayResult()">Adjust font size</button>
</body>
</html>
Try it Yourself »
Style Object Other Extensions