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>

打印页面