Home > Article > Web Front-end > "What does font-family -apple-system mean?"
"What does font-family -apple-system mean?"
- WBOYforward
- 2023-08-23 10:49:02924browse
In CSS, the 'font-family' property is used to set the font of the text content of an HTML element. It accepts multiple font names as values. If the browser doesn't support the first font, it sets the next font style for the HTML element.
Users can use the 'font-family' CSS property according to the following syntax.
font-family: value1, value2, value3, ...
The '-apple-system' value of the 'font-family' CSS property allows developers to set the same font for the HTML content of a web page as that of the Apple operating system. This means we can set fonts based on the user's device preferences.
grammar
Users can use the "-apple-system" font as the "font-family" CSS property according to the following syntax.
font-family: -apple-system;
Example 1
In the example below, we set the "-apple-system" font family for the text content of the HTML element. If you are using an Apple device, you can observe that it sets the font to the same specifications as your Apple device.
<html>
<head>
<style>
.text {
font-size: 1.6rem;
font-family: -apple-system;
color: blue;
}
</style>
</head>
<body>
<h2>Using the <i> -apple-system </i> fonts to set the font according to apple device's font</h2>
<p class = "text"> Welcome to the TutorialsPoint! </p>
</body>
</html>
The Chinese translation of Example 2
is:Example 2
In the example below, we add "BlinkMacSystemFont" to the alternatives as the second value of the font family property. Here, for Firefox and Opera browsers, the "-apple-system" value is used, while Chrome browser supports "BlinkMacSystemFont". Additionally, we used some other fonts as alternative values. So "font-family" will select the next font until it finds one that is supported by the specific browser.
<html>
<head>
<style>
.text {
font-size: 1.6rem;
font-family: -apple-system, BlinkMacSystemFont, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
color: green;
}
</style>
</head>
<body>
<h2>Using the <i> -apple-system </i> fonts to set the font according to apple device's font</h2>
<p class = "text"> Hey! How are you? </p>
</body>
</html>
Users learned to use the "-apple-system" font family to select fonts for Apple devices to select fonts based on the user's device preferences. Additionally, we set up fallback fonts in case the browser cannot find the device's fonts.
The above is the detailed content of "What does font-family -apple-system mean?". For more information, please follow other related articles on the PHP Chinese website!