資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究什麼是 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裝置規格相同的字型。
<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>
示例2
在下面的示例中，我們添加了‘BlinkMacSystemFont’作為font-family屬性的第二個值，用於回退選項。這裡，‘-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>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+瀏覽量
廣告