CSS font-family 属性详解：选择字体系列，提升网页可读性

CSS font-family 属性详解：选择字体系列，提升网页可读性

font-family 是 CSS 属性，用于指定元素的字体系列。它接受一个或多个字体名称作为参数，多个名称之间用逗号分隔，表示字体的优先级。如果第一个字体无法加载或在用户设备上不可用，浏览器将尝试加载下一个字体。

示例：

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

上述代码表示当显示 body 元素的文本时，首选 Arial 字体，如果 Arial 无法加载或不可用，则使用 sans-serif 字体。

常见的字体系列

1. 通用字体系列：

   • serif：有衬线字体，如 Times New Roman、Georgia 等。
   • sans-serif：无衬线字体，如 Arial、Helvetica 等。
   • monospace：等宽字体，如 Courier New、Consolas 等。

2. 具体字体名称：

   • 安装在用户设备上的字体名称，如 Arial、Georgia、Verdana 等。

3. Google Fonts 等 Web 字体：

   • 在网页中引入的外部字体文件，如 'Open Sans'、'Roboto' 等。

使用引号：

字体名称可以使用单引号括起来，特别是当字体名称包含空格或特殊字符时。

示例：

h1 {
  font-family: 'Open Sans', Arial, sans-serif;
}

上述代码表示当显示 h1 元素的文本时，首先尝试加载 'Open Sans' 字体，如果无法加载，则尝试加载 Arial 字体，如果仍然无法加载，则使用 sans-serif 字体。

注意事项

值得注意的是，font-family 属性只能指定字体系列，而不能直接指定字体样式（如粗体、斜体等）。要指定字体样式，可以使用 font-weight、font-style 等其他 CSS 属性。