极客教程CSS font-family怎么用
在网页开发中，我们经常需要设置文本的字体样式，其中font-family属性是用来指定文本的字体族的。在本文中，我们将详细介绍font-family属性的使用方法及注意事项。
font-family属性介绍
首先，让我们来了解一下font-family属性的基本信息。
语法
font-family属性的语法如下：
selector {
font-family: value;
}
值
font-family属性的值可以是字体系列名、具体字体名称、通用字体名称或者initial、inherit等CSS关键字。多个值之间用逗号分隔，浏览器会根据值的顺序依次向下查找，直到找到用户计算机上安装的字体。
局部字体族
在指定字体族时，可以指定一系列的字体名称，以备浏览器不支持第一个字体时，可以使用备用字体。这样可以提供更好的兼容性。
使用具体字体名称
在实际开发中，我们可以直接使用字体的具体名称来指定字体族。比如，我们要指定文本使用微软雅黑字体，可以这样写：
body {
font-family: "Microsoft Yahei";
}
使用字体系列名
除了使用具体的字体名称，我们还可以使用字体系列名来指定字体族。字体系列名是一组字体名称的列表，顺序按优先级排列。
常见字体系列名
在CSS中，有一些常见的字体系列名，如下所示：
serif: 衬线字体，比如Times New Romansans-serif: 无衬线字体，比如Arialmonospace: 等宽字体，比如Courier Newcursive: 手写体，比如Comic Sans MSfantasy: 装饰体，比如Impact
我们可以使用这些字体系列名来指定字体族。示例代码如下：
h1 {
font-family: serif;
}
p {
font-family: sans-serif;
}
备用字体
为了提高兼容性，我们可以指定一系列备用字体。如果用户计算机上没有第一个字体，浏览器会依次向下查找，直到找到用户计算机上安装的字体。
示例代码如下：
h2 {
font-family: Arial, "Microsoft Yahei", sans-serif;
}
指定通用字体名称
除了具体的字体名称和字体系列名，我们还可以使用通用字体名称来指定字体族。通用字体名称包括以下几种：
system-uiui-serifui-sans-serifui-monospacemathemojifangsong
示例代码如下：
blockquote {
font-family: ui-serif;
}
在Web开发中使用font-family
在实际的Web开发中，我们通常会使用Google Fonts等在线字体库来引入自定义字体。这样可以使网页的字体更加多样化，提高用户体验。
引入Google Fonts
以在网页中使用Roboto字体为例，我们可以在HTML文件的head标签中引入Google Fonts的链接：
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<p style="font-family: 'Roboto', sans-serif;">Hello, Google Fonts!</p>
</body>
</html>
在上面的示例中，我们通过在<link>标签中引入Roboto字体，然后在CSS中使用font-family: 'Roboto', sans-serif;来指定文本的字体。
总结
通过本文的介绍，我们学习了如何正确使用font-family属性来设置文本的字体族。在实际开发中，我们可以根据项目需求选择合适的字体名称、字体系列名或通用字体名称，提高网页的显示效果和用户体验。