search

Home  >  Article  >  Web Front-end  >  "What does font-family -apple-system mean?"

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

WBOY
WBOYforward
2023-08-23 10:49:021087browse

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

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!

Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to disable click events in cssNext article：How to disable click events in css

Related articles

See more