'What does font-family -apple-system mean?'-CSS Tutorial-php.cn

'What does font-family -apple-system mean?'

WBOY

Release： 2023-08-23 10:49:02

forward

1147 people have browsed it

What does font-family -apple-system mean?

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, ...

Copy after login

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;

Copy after login

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>

Copy after login

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>

Copy after login

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!