How to use font-optical-sizing property in CSS ?
Last Updated :
30 May, 2023
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...