The font-size-adjust property controls the font size when the first specified font is not available. In such cases, the browser uses the second specified font. Thus, the font size can be changed. The font-size-adjust controls this process.
The font-size-adjust property is one of the CSS3 properties.
All fonts have an "aspect value" which is the difference of size between the lowercase letter and the uppercase letter.
| Initial Value | none |
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | Yes. |
| Animatable | Yes. |
| Version | CSS3 |
| DOM Syntax | object.style.fontSizeAdjust = "0.5"; |
Syntax
font-size-adjust: number | none | initial | inherit;Example of the font-size-adjust property:
<!DOCTYPE html>
<html>
<head>
<title>The title of the document </title>
<style>
div.a {
font-family: sans-serif;
}
div.b {
font-family: 'times new roman';
}
#box-one,
#box-two {
font-size-adjust: 0.58;
}
</style>
</head>
<body>
<h1>Font-size-adjust property example</h1>
<h2>Two divs with the same font-size-adjust property:</h2>
<div id="box-one" class="a">
The font-size-adjust CSS property sets how the font size should be chosen based on the height of lowercase rather than capital letters.
</div>
<div id="box-two" class="b">
The font-size-adjust CSS property sets how the font size should be chosen based on the height of lowercase rather than capital letters.
</div>
<h2>Two divs without the font-size-adjust property:</h2>
<div class="a">
The font-size-adjust CSS property sets how the font size should be chosen based on the height of lowercase rather than capital letters.
</div>
<div class="b">
The font-size-adjust CSS property sets how the font size should be chosen based on the height of lowercase rather than capital letters.
</div>
</body>
</html>Values
| Value | Description |
|---|---|
| none | No any font size adjustment. This is the default value of the property. |
| number | Sets the aspect value. |
| initial | It makes the property use its default value. |
| inherit | It inherits the property from its parents element. |
Browser support
|
|
|
|
|
|---|---|---|---|---|
| ✕ | ✕ | 3.0+ | ✕ | ✕ |
Practice Your Knowledge
What is the main function of the 'font-size-adjust' property in CSS?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.