'font-family -apple-system是什麼意思？'-css教學-PHP中文網

首頁

web前端

css教學

'font-family -apple-system是什麼意思？'

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 23, 2023 am 10:49 AM

font-family -apple-system是什麼意思？

在CSS中，'font-family'屬性用來設定HTML元素的文字內容的字體。它接受多個字體名稱作為值。如果瀏覽器不支援第一個字體，它會為HTML元素設定下一個字體樣式。

使用者可以依照下列語法使用 'font-family' CSS 屬性。

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

‘font-family’ CSS屬性的‘-apple-system’值允許開發者為網頁的HTML內容設定與蘋果作業系統相同的字體。這意味著我們可以根據用戶設備的偏好來設定字體。

文法

使用者可以按照下面的語法使用「-apple-system」字體作為「font-family」 CSS屬性。

font-family: -apple-system;

Example 1

在下面的範例中，我們為HTML元素的文字內容設定了「-apple-system」字體系列。如果您使用的是蘋果設備，您可以觀察到它會設定與您蘋果設備規格相同的字體。

<html>
<head>
   <style>
      .text {
         font-size: 1.6rem;
         font-family: -apple-system;
         color: blue;
      }
   </style>
</head>
<body>
   <h2 id="Using-the-i-apple-system-i-fonts-to-set-the-font-according-to-apple-device-s-font">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>

Example 2

的中文翻譯為：

範例2

在下面的範例中，我們將「BlinkMacSystemFont」作為字型系列屬性的第二個值新增至備選選項。在這裡，對於Firefox和Opera瀏覽器，使用“-apple-system”值，而Chrome瀏覽器支援“BlinkMacSystemFont”。此外，我們也使用了一些其他字體作為備選值。因此，「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 id="Using-the-i-apple-system-i-fonts-to-set-the-font-according-to-apple-device-s-font">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-system」字體系列來為蘋果設備選擇字體，以根據用戶設備的偏好選擇字體。此外，我們也設定了備用字體，以防瀏覽器無法找到裝置的字體。

以上是'font-family -apple-system是什麼意思？'的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除