Whatever web applications or websites we make nowadays, we make sure that it is compatible with all screen sizes. So CSS comes with the font-optical-sizing property which sets whether the text being rendered is optimized for different screen sizes or not. It allows the browser to adjust the outline of font glyph to make them more eligible at different sizes.
If a font supports font-optical-sizing property then using this would be the most efficient way to optically size it. If we talk of the font that supports this property, then we can say that all the variable fonts support this property. For those fonts which have an optical size variation axis, the optical sizing gets enabled by default itself.
Syntax:
The syntax for the font-optical-sizing property is as follows.
font-optical-sizing: value;
Property values: This property accepts property values described below.
- keyword_values: The value of this property refers to the values defined by “auto”, “none”, etc.
- global_values: The value of this property refers to the values defined by “inherit”, “initial”, “unset”.
Example 1: Below is the example that illustrates the use of font-optical-sizing property using property value “auto“. The webpage adjusts itself to maintain the shape of glyphs or characters for optimal viewing.
HTML
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
color: green;
padding: 5px;
font-weight: bold;
font-optical-sizing: auto;
}
</style>
</head>
<body>
<p>Hello GeeksforGeeks!</p>
</body>
</html>
|
Output:
auto setting
Example 2: Below is the example that illustrates the font-optical-sizing property using the value “initial“.
HTML
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
color: green;
padding: 6px;
font-weight: bold;
font-style: italic;
font-optical-sizing: initial;
}
</style>
</head>
<body>
<p>Welcome to this Computer Science portal</p>
</body>
</html>
|
Output:
initial setting
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
30 May, 2023
Like Article
Save Article