font-family 是 CSS 中用于定义文本字体族的属性。通过 font-family 属性,你可以指定一组字体,浏览器将按照列表中的顺序逐个查找可用的字体,然后使用第一个找到的可用字体。

以下是 font-family 属性的基本语法:
selector {
  font-family: font1, font2, font3, ...;
}

  •  font1, font2, font3, ...:字体族的名称。可以是特定字体的名称(如 "Arial")或通用字体分类(如 "serif"、"sans-serif")。


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

在这个例子中,如果用户计算机上有 "Helvetica" 字体,则使用它;否则,如果有 "Arial" 字体,则使用它;最后,如果前两者都不可用,则使用系统的 sans-serif 字体。

常见的字体族分类包括:

  •  serif: 衬线字体,如 Times New Roman。

  •  sans-serif: 无衬线字体,如 Arial。

  •  monospace: 所有字符占用相同的宽度,如 Courier New。

  •  cursive: 手写风格的字体。

  •  fantasy: 花体字体,通常用于标题。


如果字体族的名称包含空格或特殊字符,需要使用引号将其括起来。
body {
  font-family: "Times New Roman", serif;
}

需要注意的是,如果字体族的名称中有多个单词,而没有使用引号括起来,只有第一个单词会被视为字体族的名称,而其他单词将被视为附加的字体族,可能会导致意外的效果。
/* 这里只有 "Times" 被视为字体族名称,"New Roman" 被视为附加的字体族 */
body {
  font-family: Times New Roman, serif;
}

总体而言,font-family 属性允许你根据优先级定义一组备用字体,确保在用户设备上有可用的字体。


转载请注明出处:http://www.zyzy.cn/article/detail/4190/CSS