<generic-family>

語法

值

<generic-family> 列舉型別透過以下列出的值之一指定：

serif

襯線是指字母中較大筆畫末端附帶的一條小線或筆畫。在襯線字型中，字形具有末尾筆畫、喇叭形或逐漸變細的末端。示例包括 Lucida Bright、Lucida Fax、Palatino、Palatino Linotype、Palladio 和 URW Palladio。

sans-serif

沒有襯線的字型；字形具有平直的筆畫末端，沒有裝飾。無襯線字型示例包括 Open Sans、Fira Sans、Lucida Sans、Lucida Sans Unicode、Trebuchet MS、Liberation Sans 和 Nimbus Sans L。

monospace

所有字形都具有相同的固定寬度。等寬字型示例包括 Fira Mono、DejaVu Sans Mono、Menlo、Consolas、Liberation Mono、Monaco 和 Lucida Console。

cursive

手寫字型中的字形通常使用草書指令碼或其他手寫風格，結果看起來更像手寫筆或刷子書寫，而不是印刷排版。CSS 使用術語“cursive”來指代任何指令碼的字型，包括那些沒有連筆的字型。手寫字型示例包括 Brush Script MT、Brush Script Std、Lucida Calligraphy、Lucida Handwriting 和 Apple Chancery。

fantasy

奇幻字型主要是裝飾性字型，包含字元的俏皮表示。奇幻字型示例包括 Papyrus、Herculanum、Party LET、Curlz MT、Harrington 和 Comic Sans MS。

system-ui

字形取自給定平臺上的預設使用者介面字型。由於世界各地的排版傳統差異很大，此通用字型家族用於那些無法清晰地對映到其他字型家族的字型。

注意：正如其名稱所示，system-ui 旨在使 UI 元素看起來像原生應用程式，而不是用於排版大段文字。它可能會導致某些使用者顯示的字型不理想——例如，預設的 Windows CJK 字型可能會導致拉丁文字型渲染不佳，並且 lang 屬性可能不會影響顯示的字型。一些作業系統不允許自定義 system-ui，而瀏覽器通常允許自定義 sans-serif 字型家族。對於大段文字，請使用 sans-serif 或其他非 UI 字型家族。

ui-serif

預設使用者介面襯線字型。請參閱上面 serif 的定義。

ui-sans-serif

預設使用者介面無襯線字型。請參閱上面 sans-serif 的定義。

ui-monospace

預設使用者介面等寬字型。請參閱上面 monospace 的定義。

ui-rounded

預設使用者介面圓角字型。

math

用於顯示數學表示式的字型，例如上標和下標、跨越多行的括號、巢狀表示式以及具有不同含義的雙線字形。

fangsong

一種介於宋體風格和楷體風格之間的特定中文字型風格。這種風格常用於政府檔案。

正式語法

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

示例

此示例演示了 font-family 屬性的幾個 <generic-family> 列舉值。

HTML

<ul>
  <li class="serif">serif</li>
  <li class="sans-serif">sans-serif</li>
  <li class="monospace">monospace</li>
  <li class="cursive">cursive</li>
  <li class="fantasy">fantasy</li>
  <li class="system-ui">system-ui</li>
</ul>

CSS

ul {
  font-size: 1.5rem;
  line-height: 2;
}
.serif {
  font-family: serif;
}
.sans-serif {
  font-family: sans-serif;
}
.monospace {
  font-family: monospace;
}
.cursive {
  font-family: cursive;
}
.fantasy {
  font-family: fantasy;
}
.system-ui {
  font-family: system-ui;
}

結果

規範

另見

• 使用此資料型別的屬性：font-family 和 font
• CSS 字型模組