Css入门: font-family（字体家族）,晴川云

Css入门: font-family（字体家族）

在CSS中，font-family属性用于定义文本的字体。字体家族是指一组字体，它们具有相似的外观和设计风格。当浏览器无法加载指定的字体时，它会按照优先级顺序依次尝试加载字体家族中的其他字体。

语法

使用font-family属性可以为文本指定一个或多个字体家族。字体家族可以是具体的字体名称，也可以是通用字体类别。

以下是font-family属性的语法：

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

在上面的代码中，font1是首选字体，如果浏览器无法加载它，将尝试加载font2，以此类推。

字体名称

字体名称是指具体的字体，如”Arial”、”Times New Roman”等。可以使用字体的英文名称或中文名称。

以下是一些常用的字体名称：

宋体：SimSun
黑体：SimHei
微软雅黑：Microsoft YaHei
楷体：KaiTi
仿宋：FangSong

例如，要将文本的字体设置为宋体，可以使用以下代码：

selector {
  font-family: SimSun;
}

通用字体类别

通用字体类别是指一组字体，它们具有相似的外观和设计风格。如果指定的字体无法加载，浏览器会尝试加载通用字体类别中的其他字体。

以下是一些常用的通用字体类别：

衬线字体：serif
非衬线字体：sans-serif
等宽字体：monospace
手写体：cursive
fantasy字体：fantasy

例如，要将文本的字体设置为衬线字体，可以使用以下代码：

selector {
  font-family: serif;
}

多个字体家族

可以为文本指定多个字体家族，以便在无法加载首选字体时使用备用字体。

以下是一个示例，将文本的字体设置为宋体，如果无法加载，则使用微软雅黑：

selector {
  font-family: SimSun, "Microsoft YaHei";
}

在上面的代码中，如果用户的计算机上没有安装宋体字体，浏览器将尝试加载微软雅黑字体。

示例

以下是一个使用font-family属性的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>示例</title>
<style>
h1 {
  font-family: "Microsoft YaHei", sans-serif;
}
p {
  font-family: "SimSun", serif;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一段文本</p>
</body>
</html>

在上面的示例中，标题使用微软雅黑字体，文本使用宋体字体。