W3Schools.com

Style fontSizeAdjust Property

Style Object Reference Style Object

Definition and Usage

The fontSizeAdjust property sets or returns the font aspect value of a text.

All fonts have an aspect value which is the size-difference between the lowercase letter "x" and the uppercase letter "X".

The fontSizeAdjust property gives you better control of the font size when the first-choice font is not available. When a font is not available, the browser uses the second specified font. This could result in a big change for the font size. To prevent this, use this property.

When the browser knows the aspect value for the first choice-font, the browser can figure out what 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 Do not preserve x-height of first-choice font. This is default
value Preserve the first-choice font's x-height, and calculate the aspect value ratio for the font.

The formula that is used: font-size of first-choice font*(aspect value of first-choice font/aspect value of available font)=font-size to use on available font

Example: If 14px Verdana (aspect value of 0.58) was unavailable, but the available font, Times New Roman, has an aspect value of 0.46, the adjusted font-size to use would be 14*(0.58/0.46) = 17.65px.
inherit The value of the fontSizeAdjust property is inherited from parent element

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The fontSizeAdjust property is only supported in Firefox.

Example

Example

Adjust font size:

<html>
<head>
<script type="text/javascript">
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 Reference Style Object
WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Best Hosting Coupons
UK Reseller Hosting
Cloud Hosting
Top Web Hosting
$3.98 Unlimited Hosting
Premium Website Design
WEB BUILDING
XML Editor - Free Trial!
FREE Website BUILDER
Best Website Templates Top CSS Templates
CREATE HTML Websites
EASY WEBSITE BUILDER
W3SCHOOLS EXAMS
Get Certified in:
HTML, CSS, JavaScript, XML, PHP, and ASP
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
STATISTICS
Browser Statistics
Browser OS
Browser Display
SHARE THIS PAGE