Easy Tutorial
❮ Jsref Charat Prop Style Whitespace ❯

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>

❮ Jsref Charat Prop Style Whitespace ❯