CSS Font-Family

CSS Font-Family 属性定义了元素使用的字体系列。 例如，在网页中，我们可以使用该属性来设置特定元素的字体。

语法：

selector {
  font-family: font1, font2, font3, ...;
}

• selector：需要设置字体的元素
• font1, font2, font3, ...：字体系列的名称，如果字体系列名称包含空格，则必须用引号将其括起来。

例如：

body {
  font-family: "Times New Roman", Times, serif;
}

在上面的例子中，浏览器将首先尝试以"Times New Roman"的字体展示文本，如果该字体不可用，则使用 Times 字体，最后是系统默认字体系列。

使用通用字体系列

CSS提供了五个通用字体系列，分别是：

• serif：衬线字体，具有较为明显的笔画粗细变化。
• sans-serif：非衬线字体，笔画粗细变化不明显。
• monospace：等宽字体，每个字符的宽度相同。
• cursive：草书体，具有一定的书法风格。
• fantasy：幻想体，通常被用作标题字体。

例：

body {
  font-family: sans-serif; /* 设置为默认的非衬线字体系列 */
}
h1 {
  font-family: fantasy; /* 使用幻想体系列 */
}

使用Web安全字体

Web安全字体是指能够在大多数操作系统或设备上显示的字体。在CSS中使用Web安全字体可以确保元素的字体在不同设备和浏览器上显示均一。

以下是一些常用的Web安全字体：

• Arial
• Helvetica
• Verdana
• Georgia
• Times New Roman
• Courier New

例：

body {
  font-family: Arial, Helvetica, sans-serif;
}

在上面的例子中，如果用户的计算机上没有 Arial 字体，浏览器将使用 Helvetica 字体，如果 Helvetica 字体也不可用，浏览器将使用默认的非衬线字体。