什么是 font-family -apple-system?

什么是 font-family -apple-system?

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

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

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

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

语法

用户可以按照以下语法使用“-apple-system”字体的“font-family”CSS属性。

font-family: -apple-system;

示例1

在下面的示例中,我们已经为HTML元素的文本内容设置了“-apple-system”字体系列。如果您使用的是Apple设备,您会发现它设置了与您的Apple设备规格相同的字体。

<html>
<head>
  <style>
    .text {
      font-size: 1.6rem;
      font-family: -apple-system;
      color: blue;
    }
  </style>
</head>
<body>
  <h2>使用 <i> -apple-system </i> 字体根据苹果设备的字体设置字体</h2>
  <p class="text">欢迎来到TutorialsPoint!</p>
</body>
</html>

示例2

在下面的示例中,我们将“BlinkMacSystemFont”作为字体系列的第二个值添加为备选项。在这里,“-apple-system”值用于Firefox和Opera浏览器,“BlinkMacSystemFont”由Chrome浏览器支持。此外,我们还使用了一些其他字体作为备选值。因此,“font-family”将选择下一个字体,直到找到特定浏览器支持的字体。

<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>使用 <i> -apple-system </i> 字体根据苹果设备的字体设置字体</h2>
  <p class="text">嘿!你好吗?</p>
</body>
</html>

用户学会了使用“-apple-system”字体系列为Apple设备选择字体,以根据用户的设备偏好设置字体。此外,我们还设置了回退字体,以防浏览器无法找到设备的字体。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

CSS 教程