CSS 資料型別 - <generic-family>

CSS 資料型別 <generic-family> 表示通用字體系列的關鍵字值。這些是可以在 font 簡寫屬性和 font-family 完整屬性中指定的回退字體系列。

此資料型別表示屬於特定字型類別的多個本地安裝的字型之一。

可能的值

CSS 資料型別 <generic-family> 使用以下值之一指定

serif：襯線字型的通用字體系列（例如，Times New Roman）。
sans-serif：非襯線字型的通用字體系列（例如，Lucida Sans、Fira Sans、Open Sans 等）。
monospace：等寬或固定間距字型的通用字體系列。（例如，Fira mono、Menlo、Consolas、Lonaco 等）。
cursive：草書字型的通用字體系列（例如，Brsuh Script MT、Lucida Calligraphy、Apple Chancery 等）。
fantasy：幻想或裝飾性字型的通用字體系列（例如，Papyrus、Party LET、Curlz MT、Harrington 等）。
system-ui：字形取自任何給定平臺上的預設使用者介面字型。此通用系列提供了未對映到其他字型的字型。
ui-serif：預設使用者介面襯線字型。
ui-sans-serif：預設使用者介面非襯線字型。
ui-monospace：預設使用者介面等寬字型。
ui-rounded：具有圓角特徵的預設使用者介面字型。
math：通用字體系列，用於顯示數學表示式，如 上標、下標、括號、巢狀表示式 和 雙線體字形。
emoji：旨在顯示錶情符號的通用字體系列。
fangsong：表示漢字的通用字體系列，介於襯線風格的宋體和草書風格的楷體之間。

語法

<generic-family> = serif | sans-serif |   monospace | cursive | fantasy | system-ui | ui-serif | ui-sans-serif | ui-monospace | ui-rounded | emoji | math | fangsong

CSS <generic-family> - 使用 font-family 屬性

以下示例演示了與 font-family 屬性一起使用的 <generic-family> 資料型別的用法

<html>
<head>
<style>
   p {
      font-size: 2.5rem;
      line-height: 0.8rem;
   }
   
   .ff-serif {
      font-family: Palatino;
      color: blue;
   }
   
   .ff-sans-serif {
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
      color: red;
   }
   
   .ff-monospace {
      font-family: monospace;
      color: green;
   }
   
   .ff-cursive {
      font-family: Brush Script MT, cursive;
      color: purple;
   }
   
   .ff-fantasy {
      font-family: Harrington, fantasy;
      color: teal;
   }
   
   .ff-system-ui {
      font-family: system-ui;
      color: brown;
   }
   
   .ff-ui-serif {
      font-family: ui-serif;
      color: black;
   }
   
   .ff-ui-rounded {
      font-family: ui-rounded;
      color: hotpink;
   }
   
   .ff-math {
      font-family: math;
      color: chocolate;
   }
</style>
</head>
<body>
   <div>
      <p class="ff-serif">serif</p>
      <p class="ff-sans-serif">sans-serif</p>
      <p class="ff-monospace">monospace</p>
      <p class="ff-cursive">cursive</p>
      <p class="ff-fantasy">fantasy</p>
      <p class="ff-system-ui">system-ui</p>
      <p class="ff-ui-serif">ui-serif</p>
      <p class="ff-ui-rounded">ui-rounded</p>
      <p class="ff-math">{1 2}</p>
      <p class="ff-fangsong">fangsong</p>
   </div>
</body>
</html>

列印頁面