首頁 > web前端 > css教學 > 主體

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

WBOY
發布: 2023-08-23 10:49:02
轉載
1074 人瀏覽過

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>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>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.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!