上查看所有课程
CSS 的 font-family 属性用于设置网页上文本的字体。例如：
h1 {
font-family: Courier, monospace;
}浏览器输出
在这里，font-family 将 h1 元素的字体设置为 Courier, monospace。
CSS 字体家族类型
字体家族分为两种类型
- 通用家族：指具有相似设计特征的字体类别。例如，
Serif、sans-serif、Cursive等。 - 字体家族：指特定的字体家族名称，如
Helvetica、Arial、Georgia等。
CSS 字体家族语法
font-family 属性的语法如下：
font-family: family-name | generic-family | initial | inherit;这里，
family-name：指特定的字体家族，如Arial、Helvetica等。generic-family：指具有相似设计特征的更广泛的字体家族类别，如serif、sans-serif等。initial：将font-family设置为默认值。inherit：从父元素继承font-family。
让我们看一个例子，
h1 {
font-family: "Source Sans Pro", "Arial", sans-serif;
}在上面的示例中，浏览器将首先尝试渲染 Source Sans Pro。如果不可用，浏览器将尝试渲染 Arial。如果也不可用，浏览器最终将使用 sans-serif 家族中的字体。
多个字体家族名称应以逗号分隔，如果字体家族名称包含多个单词，则应使用双引号括起来。
CSS 通用字体家族类型
CSS 中有五种通用家族，它们指具有相似设计特征的更广泛的字体家族类别。
衬线体 (Serif)
Serif 字体在每个字符的末尾都有一个小的线条或笔画。它们用于书籍、杂志等传统印刷材料以及简历或商务信函等正式文档中。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Serif Family</title>
</head>
<body>
<h1>Serif font families</h1>
<p class="times-new-roman">Times New Roman font</p>
<p class="georgia">Georgia font</p>
</body>
</html>h1 {
font-family: "Times New Roman", serif;
}
p.times-new-roman {
/* sets the text to "Times New Roman" */
font-family: "Times New Roman";
}
p.georgia {
/* sets the text to Georgia */
font-family: Georgia;
}浏览器输出
一些流行的 serif 字体家族包括 Times New Roman、Georgia、Garamond、Palatino 等。
无衬线体 (Sans-Serif)
Sans-Serif 字体在字符末尾没有小的线条或笔画。它们被认为是干净和现代的，因此经常用于数字界面和在线内容。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>sans-serif Family</title>
</head>
<body>
<h1>Serif-Serif font families</h1>
<p class="helvetica">Helvetica font</p>
<p class="arial">Arial font</p>
</body>
</html>h1 {
font-family: Helvetica, Arial, sans-serif;
}
p.arial {
/* sets the text to Helvetica font*/
font-family: Helvetica;
}
p.helvetica {
/* sets the text to Arial font */
font-family: Arial;
}浏览器输出
一些流行的 sans-serif 字体家族包括 Open Sans、Poppins、Helvetica、Arial 等。
等宽体 (Monospace)
Monospace 字体在所有字符之间具有统一的间距。它们用于编程代码和文本编辑器中，因为它们易于阅读。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Monospace Family</title>
</head>
<body>
<h1>Monospace font families</h1>
<p class="courier">Courier font</p>
<p class="consolas">Consolas font</p>
</body>
</html>h1 {
font-family: Courier, monospace;
}
p.courier {
/* sets the text to Courier font*/
font-family: Courier;
}
p.consolas {
/* sets the text to Consolas font */
font-family: Consolas;
}浏览器输出
一些流行的 sans-serif 字体家族包括 Fira Mono、Courier、Consolas 等。
手写体 (Cursive)
Cursive 字体具有字符的连接笔画并模仿手写。它们经常用于网页上的装饰目的。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Cursive Family</title>
</head>
<body>
<h1>Cursive font families</h1>
<p class="lucida-handwriting">Lucida Handwriting font</p>
<p class="segoe-script">Segoe Script font</p>
</body>
</html>h1 {
font-family: "Lucida Handwriting", cursive;
}
p.lucida-handwriting {
/* sets the text to Lucida Handwriting font*/
font-family: "Lucida Handwriting";
}
p.segoe-script {
/* sets the text to Segoe Script font */
font-family: "Segoe Script";
}浏览器输出
一些流行的 cursive 字体家族包括 Lucida Handwriting、Apple Chancery、Brush Script 等。
奇幻体 (Fantasy)
Fantasy 字体主要是装饰性字体。它们用于创意和趣味性的设计项目。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Fantasy Family</title>
</head>
<body>
<h1>Fantasy font families</h1>
<p class="papyrus">Papyrus font</p>
<p class="harrington">Harrington font</p>
</body>
</html>h1 {
font-family: Papyrus, fantasy;
}
p.papyrus {
/* sets the text to Papyrus */
font-family: Papyrus;
}
p.harrington {
/* sets the text to Harrington */
font-family: Harrington;
}浏览器输出
一些流行的 fantasy 字体家族包括 Papyrus、Harrington、Wisp、Arkana、Rivendell 等。