Style fontSizeAdjust
Property
Definition and Usage
The fontSizeAdjust
property sets or returns the font aspect value of text.
All fonts have an aspect value, which is the size difference between the lowercase letter "x" and the uppercase letter "X".
When the first choice font is not available, the fontSizeAdjust
property allows you to better control the font size. When a certain font is not available, 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 for displaying text with the second choice font.
Syntax
Set the fontSizeAdjust
property:
Return the fontSizeAdjust
property:
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. <br> <br>Used formula: Font size of preferred font * (aspect value of first choice font / aspect value of available font) = Font size of available font <br> <br>Example: If 14px Verdana (aspect value is 0.58) is not available, but an available font (Times New Roman) has an aspect value of 0.46, then the size of the alternative font 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
Adjust Font Size:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tutorialpro.org(tutorialpro.org)</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>