选择正确的字体是使你的网站可用和可访问的重要第一步。
文本的格式化会影响到你的设计和网页的可读性。
你可以使用CSS以多种方式修改你的HTML文本的显示方式。你可以选择你想使用的字体类型，是否加粗，字体有多大，你甚至可以改变颜色，为其添加不同的间距或装饰。
在这篇文章中，我们将介绍两种最流行的字体类型--有衬线字体和无衬线字体之间的区别。
此外，我们还将介绍语法和如何使用font-family 属性，以便在CSS的帮助下，你可以选择并在你的网页设计项目中使用不同的字体。
让我们开始吧!
字体术语
首先，我们来讨论一下现代浏览器所支持的一些最常见和最常用的字体类型。
有衬线字体类型
有衬线字体的特点是在字母的末端有一些额外的细部"
在字符的主要笔画末端，有一些被称为衬线的小笔画:
有衬线字体在传统上被广泛用于印刷业，因为它们被认为可用于长篇文字的阅读。但它们在屏幕上并不总是显示得很好。
有衬线字体被认为是你可以使用的最经典、最优雅、最传统的字体之一。
无衬线字体类型
这种类型的字体创造了一种简洁的设计外观，同时又非常具有可读性和清晰度:
这种字体在每个字母上都有笔直的两端，边缘没有笔画，使字符看起来尖锐、平坦，线条简洁:
无衬线字体被认为是现代的、简约的、当代的，对于高分辨率的电脑屏幕来说，是一种更可读的选择。
单空格字体类型
在这种字体类型中，每个字母都有相同的固定宽度，字母之间的间距相等。
在我们迄今为止讨论过的前几种字体类型中，每个字母都有不同的宽度。
因此，对于单色字体，所有字母都有相同的宽度。这使得文本很好地对齐，并使其易于遵循，给设计带来简洁的外观和机械感:
还有两种通用的字体类型，fantasy 和cursive ，但最广泛使用的字体是上面提到的那些。
如何为你的网站选择字体--字体名称
现在我们已经介绍了字体术语和描述的基本知识，是时候看看每个家族中的许多不同的字体样式了。
下面列出了每个字体家族中的一些常见风格。
有衬线字体
- 乔治亚字体
- 泰晤士报
- Times New Roman
- 博多尼
- 加拉蒙
- 帕拉蒂诺
- ITC Clearface
- 栽种园
- 货运文本
- 滴答
- 美国打字机
无衬线字体
- Arial
- 维达纳
- 亥尔维提卡
- 日内瓦
- 塔霍马
- Trebuchet MS
- 开放式无字体
- 解放书局
- 影响字体
单空间字体
- 信使字体
- MS Courier New
- 摩纳哥
- Lucinda Console
- Andalé Mono
- 梦洛
- 领事馆
如何使用font-family 属性
在CSS中，font-family 属性定义了一个元素的特定字体，以及其文本内容的外观和呈现方式。
font-family 属性的语法是:
element {
font-family: value;
}
我们写下属性font-family ，然后是冒号: 、空格、value ，最后用分号; 来结束规范。
我们必须设置我们想要的目标属性，并分配我们想要的值。
如何设置一个CSS字体
假设我们有下面这个HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>CSS Fonts</title>
</head>
<body>
<h1>HTML Font – CSS Font Family </h1>
<p>I am a paragraph</p>
</body>
</html>
如果没有应用任何样式，也没有明确地给font-family 属性设置一个值，浏览器就会以它们自己选择的字体显示标题和段落。
谷歌浏览器中使用的默认标准字体是Times New Roman ，一种衬线字体。
结果看起来是这样的。
有几种方法可以设置不同的字体，指定我们想要的字体。
在选择字体时--也就是value 部分--值得一提的是，网站使用的字体集是有限的。他们会抓取已经安装在用户电脑上的字体。
浏览器只有在某种字体已经安装在用户的电脑上时才会显示它。
所以，我们来看看在CSS中设置字体的方法。
如何使用通用的字体-家族名称
在这种情况下，名称是关键词，包括前面提到的字体类别之一（有衬线、无衬线、单色）。
它看起来会是这样的:
p {
font-family: serif;
}
这就把字体设置为通用衬线字体。
如何使用一个特定的字体家族名称
p {
font-family: Times,serif;
}
这条规则将Times 作为所需的字体，然后将serif 作为通用的后备选项，以防用户的电脑上没有安装第一个选项。
如果该名称包含任何空白，你需要用引号将其括起来:
p {
font-family: "Courier New",monospace;
}
这就把字体设置为Courier New ，并添加monospace 作为备份。
如果我们指定的是通用名称以外的字体（比如有衬线字体、无衬线字体），我们需要给浏览器一个后备字体。
如何使用字体堆栈
在这种情况下，font-family 属性有多个值。
它是一个优先的、以逗号分隔的、你可以应用于文本的字体家族名称的列表，表示所有的字体都是备选字体。这使得浏览器和操作系统具有最大的兼容性。
列表的优先级从左到右，从高到低:
p {
font-family: "Lucida Console", Courier, monospace;
}
通过应用一个以上的字体家族名称，你可以创建一个偏好的顺序。我们先从我们想要的字体开始。
如果用户的电脑上没有安装第一个选项，或者浏览器不支持该选项，浏览器就会转到第二个字体，并使用该字体。如果该字体也不可用，它就会转到第三种字体，以此类推。
我们可以列出任意多的字体，但最佳做法是列出三到四种。
如果一切都失败了，总会有一种通用字体列在最后，作为最后的选择--后备机制。
在列出的这组字体中，浏览器必须至少支持一个选项，而通用名称可以保证所需字体家族的东西会被呈现出来。
p {
font-family: Georgia, "Times New Roman", Times, serif;
你列出的字体被称为字体栈。
浏览器首先会查找Georgia 。如果它被安装了，浏览器就会显示该字体。然后，它将寻找Times New Roman 。如果该字体也不可用，它将显示通用的默认serif 家族字体。
总结
在这篇文章中，我们介绍了不同的字体家族，并给出了每个家族中不同风格的一些例子。
我们还讨论了font-family 属性和在CSS中设置字体的三种不同方法。
如果你想了解更多关于HTML和CSS以及所使用的不同现代技术，freeCodeCamp有一个关于响应式网页设计的免费认证。
你将从绝对的基础知识开始，通过Flexbox、CSS网格以及如何使网站产生共鸣来学习。这些都是数字设计和前端网页开发所必须具备的技能。
最后，你将建立5个项目，包括一个投资组合网站，如果你愿意，你可以展示你所建立的其他项目。
谢谢你的阅读，学习愉快。
