Before learning how to use the font-optical-sizing property, we first need to take a look at the font property in CSS and why font-optical-sizing is needed as a separate property.
The style of text on a web page is controlled by the font property in CSS, which is a shorthand for many other properties. It can be used to apply system fonts to elements, or to set different values for other CSS properties.
This property applies to all elements and is inheritable in nature, meaning that the font of the child element will be the same as the font of the parent element unless otherwise specified.
The properties that make up the font shorthand properties are as follows -
Font-family - It specifies the font family that will be applied to the text, you can optionally provide a prioritized list of families from left to right.
Font Size − Used to control the size of font or text.
Font Stretch − You can use this property to set character faces that can be narrower or wider than normal characters.
Font style − This property specifies whether the font should be displayed in bold, italic, underline, or strikethrough text
Font-variant - Control font variants and set different values for ligatures.
Font-weight - This property sets how bold the text appears.
Line height- Used to set the distance between lines of text.
All of these properties, whether used as part of the font shorthand properties or on their own, have an initial value. For most, the initial value is "Normal", the default value for font size is "Medium", and the default value for font family depends on the user's system.
The following is an example of using the font attribute to style text.
<!DOCTYPE html> <html lang="en"> <head> <title>Various font styles</title> </head> <body> <p style="font:caption">This text will be displayed as a caption.</p> <p style="font:icon">This text will be displayed as an icon.</p> <p style="font:menu">This text will be displayed as a menu.</p> <p style="font:message-box">This text will be displayed as message-box</p> <p style="font:small-caption">This text will be displayed as a smaller form of caption.</p> <p style="font:status-bar">This text will be displayed as status bar.</p> <p style="font: bold;">This will be bold</p> <p style="font-size: large;">This will have larger font size.</p> </body> </html>
CSS has a font-optical-sizing property that determines whether the generated text is optimized for various screen sizes. Browsers can change the outline of font glyphs to make them more legible at various sizes.
If the font supports font optical resizing, it is a great advantage for us. This way we ensure that the text always adapts to the screen the user is using. Most variable font families support this property. Optical resizing is automatically enabled when a font has an optical resizing axis. We use the opsz value in the font variant settings to represent the optical size change axis.
When using optical scaling, smaller font sizes will typically appear with thicker strokes and larger serifs, while larger text will typically appear with more subtle, thicker and thinner strokes. Greater contrast.
When specifying this property, the following values can be used -
None − We use this value when we don’t need optically modified text.
Auto - The browser will use this value when we have to adjust the glyph shape according to the screen size.
In addition, we can also use global values (inherit, initial and unset) as the value of this attribute.
By default, the initial value of this property is auto. It applies to all elements and also includes the ::first-letter and ::first-line attributes. It is an inheritable value and the browser-specified value is used as its calculated value. It has discrete animation types.
An example of using the value auto as the value of this attribute is shown below.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
padding: 3%;
font-weight: 700;
font-optical-sizing: auto;
}
</style>
</head>
<body>
<p>This text will be optically modified for all screen sizes.</p>
</body>
</html>
This example uses inheritance as the value of a property, which is one of three global properties we can use in CSS.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
padding: 3%;
font-weight: 700;
font-optical-sizing: inherit;
}
</style>
</head>
<body>
<p>This text will be optically modified for all screen sizes using inherit as its value.</p>
</body>
</html>
To summarize, the font-optical-sizing property in CSS is a great way to make text look better on different devices and resolutions. It allows you to adjust the size of the font according to the intended use, which helps improve readability and create a more consistent design across different screens. By taking advantage of this feature, designers can ensure that their layouts look great no matter what device they are viewed on, without having to manually adjust settings for each screen size.
The above is the detailed content of How to use font-optical-sizing property in CSS?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
