什么是 font-family -apple-system？

在CSS中，‘font-family’ 属性用于设置HTML元素文本内容的字体。它接受多个字体名称作为值。如果浏览器不支持第一个字体，它将为HTML元素设置下一个字体样式。

用户可以按照以下语法使用‘font-family’ CSS属性。

font-family: value1, value2, value3, ...

‘font-family’ CSS属性的‘-apple-system’值允许开发者为网页的HTML内容设置与Apple操作系统相同的字体。这意味着我们可以根据用户的设备偏好设置字体。

语法

用户可以按照以下语法为‘font-family’ CSS属性使用‘-apple-system’字体。

font-family: -apple-system;

示例1

在下面的示例中，我们为HTML元素的文本内容设置了‘-apple-system’字体系列。如果您使用的是Apple设备，您可以观察到它设置了与您的Apple设备规格相同的字体。

Open Compiler
<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>

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

示例2

在下面的示例中，我们添加了‘BlinkMacSystemFont’作为font-family属性的第二个值，用于回退选项。这里，‘-apple-system’值用于Firefox和Opera浏览器，而‘BlinkMacSystemFont’则受Chrome浏览器支持。此外，我们还使用了一些其他的字体作为回退值。因此，‘font-family’将选择下一个字体，直到找到特定浏览器支持的字体。

Open Compiler
<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>

用户学习了如何使用针对Apple设备的‘-apple-system’字体系列，根据用户的设备偏好选择字体。此外，如果浏览器找不到设备的字体，我们还设置了回退字体。

更新于：2023年4月27日

2K+浏览量

开启你的职业生涯

通过完成课程获得认证

开始学习
广告