The HTML DOM Style fontSizeAdjust property is used for setting the size of font based on the height of lowercase letter x and uppercase letter X. It offers a greater control on the font size than fontSize property.
Note: This property is only supported in Mozilla Firefox.
Following is the syntax for −
Setting the fontSizeAdjust property −
object.style.fontSizeAdjust = "none|number|initial|inherit"
The above properties are explained as follows −
| Value | Description |
|---|---|
| none | Thisdoes no adjustment for font size and is the default value. |
| number | Itis used for calculating the aspect value ratio by dividing thefirst font size x-height by second one and multiplying that bygiven number. |
| initial | Forsetting this property to initial value. |
| inherit | Toinherit the parent property value |
Let us look at an example for the fontSizeAdjust property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
.one {
font-family: verdana;
}
.two {
font-family: 'times new roman';
}
#demo1, #demo2 {
font-size-adjust: 0.5;
}
</style>
<script>
function adjustFontSize() {
document.getElementById("demo1").style.fontSizeAdjust="1";
document.getElementById("demo2").style.fontSizeAdjust="1";
document.getElementById("Sample").innerHTML="The fontSizeAdjust property for the above text inside div is increased to 1";
}
</script>
</head>
<body>
<div class="one">This is demo text</div><br/>
<div id="demo1" class="one">This is demo text</div><br/>
<div class="two">This is demo text</div><br/>
<div id="demo2" class="two">This is demo text</div>
<p>Change the above div text fontSizeAdjust property by clicking the below button</p>
<button onclick="adjustFontSize()">Change fontSizeAdjust </button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Change fontSizeAdjust” button −
