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 属性

以下示例演示如何使用 <generic-family> 数据类型与 font-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>