PUBLISHED ON: APRIL 14, 2021
CSS font-optical-sizing property
The font-optical-sizing property in CSS asserts whether text rendering has been optimized for viewing at different sizes or not. Optical sizing gets enabled by default for the fonts that have an optical size variation axis.
The optical size variation axis is represented by opsz in the fpont-variation-settings. This property can be specified as one of the keywords: either none or auto.
Syntax for font-optical-sizing property:
Following is the syntax for the font-optical-sizing property.
font-optical-sizing: auto | none | inherit | initial | unset
Example: CSS font-optical-sizing property
Here in the example below, we are using the font-optical-sizing property with different border styles, colors, and different values. In this case, we have given the font-optical-sizing property value as none.
<!DOCTYPE html>
<html>
<head>
<title>The font-optical-sizing property in CSS</title>
<style type="text/css">
@font-face {
src: url('AmstelvarAlpha-VF.ttf');
font-family:'Amstelvar';
font-style: normal;
}
p {
font-size: 36px;
font-family: Amstelvar;
}
.no-optical-sizing {
font-optical-sizing: none;
}
</style>
</head>
<body>
<p class="optical-sizing">This paragraph is optically sized. This is the default across browsers.</p>
<p class="no-optical-sizing">This paragraph is not optically sized. You should see a difference in supporting browsers.</p>
</body>
</html>
Output:
Example 2: CSS font-optical-sizing property
Here in the example below, we are using the font-optical-sizing property with different border styles, colors and their different values. In this case, we have given the font-optical-sizing property value as auto.
<!DOCTYPE html>
<html>
<head>
<title>The font-optical-sizing property in CSS</title>
<style type="text/css">
@font-face {
src: url('AmstelvarAlpha-VF.ttf');
font-family:'Amstelvar';
font-style: normal;
}
p {
font-size: 36px;
font-family: Amstelvar;
font-optical-sizing: auto;
}
.auto-optical-sizing {
font-optical-sizing: auto;
}
.h1{
font-optical sizing: auto;
}
</style>
</head>
<body>
<h1> CHAPTER 1 </h1>
<p class="optical-sizing">This paragraph is optically sized. This is the default across browsers.</p>
<p class="auto-optical-sizing">This paragraph is not optically sized. You should see a difference in supporting browsers.</p>
</body>
</html>
Output:
Live Example
Here in this live example, you can test the code and execute the example using different values or even edit the code example.
Browser Compatibility
There are many browsers that do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
79 |
79 |
| Edge |
17 |
17 |
| Firefox |
62 |
62 |
| Internet Explorer |
no |
no |
| Opera |
66 |
66 |
| Safari |
11 |
11 |
| Webview Android |
79 |
79 |
| Chrome Android |
79 |
79 |
| Firefox Android |
62 |
62 |
| Opera Android |
no |
no |
| IOS Safari |
11 |
11 |
| Samsung Internet |
12.0 |
12.0 |
Conclusion
The initial value for the font-optical-sizing property is auto. This property is applicable to all elements and also applicable to the ::first-letter'and ::first-line. It is an inherited property. The computed value for this property is the as specified one. The animation type for this property is discrete.
