2.1 属性 font-family
字体在网页设计中起着关键作用，影响文本的可读性和视觉吸引力。 字体系列定义了网页中可用字体的整体风格和特征。 在 CSS 中，字体通常被分为三个主要系列：serif、sans-serif 和 monospace。让我们更详细地了解每一个。
属性 font-family
font-family 属性用于指定字体系列。可以指定多个字体，用逗号分隔， 这样浏览器可以在第一个字体不可用时使用列表中的下一个字体。
使用多个字体的示例
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
使用示例：
CSS
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
HTML
<body>
<p>这个文本使用的是 Helvetica Neue、Helvetica 或 Arial 字体。</p>
</body>
2.2 字体系列 serif
带衬线的字体（serif）特点是字母和符号的末端有小线条或笔划。 这些字体使文本看起来更加传统和正式。
serif 字体示例：
- Times New Roman
- Georgia
- Garamond
- Baskerville
使用示例：
CSS
body {
font-family: 'Times New Roman', serif;
}
HTML
<body>
<h1>This is a heading</h1>
<p>This is a paragraph using a serif font.</p>
</body>
2.3 字体系列 sans-serif
无衬线字体（sans-serif）没有字母和符号末端的小线条。这些字体看起来更现代和简约， 通常用于网页设计，因为它们在屏幕上具有良好的可读性。
sans-serif 字体示例：
- Arial
- Helvetica
- Verdana
- Open Sans
CSS
body {
font-family: 'Arial', sans-serif;
}
HTML
<body>
<h1>This is a heading</h1>
<p>This is a paragraph using a sans-serif font.</p>
</body>
2.4 字体系列 monospace
等宽字体（monospace）的所有字符宽度相同。这种字体常用于显示代码， 技术文档和表格，在这些地方字符对齐很重要。
monospace 字体示例：
- Courier New
- Consolas
- Monaco
- Lucida Console
使用示例：
CSS
body {
font-family: 'Courier New', monospace;
}
HTML
<body>
<h1>This is a heading</h1>
<p>This is a paragraph using a monospace font.</p>
<pre>
function helloWorld() {
console.log("Hello, world!");
}
</pre>
</body>
为了提升网页的视觉体验和风格多样性，通常会结合使用不同的字体系列。 比如，标题可以使用 serif 字体，而正文可以用 sans-serif 字体。而代码总是用 monospace。
GO TO FULL VERSION