在网页设计中，字体样式能够极大地影响用户的阅读体验和视觉效果。本小节将详细介绍如何使用CSS控制字体样式，并结合具体案例进行说明。
字体类型
CSS允许我们使用多种方式定义字体，最主要的方式是通过 font-family 属性。这里有几种常见字体的使用方式：
1
2
3
4
5
6
7
| body {
font-family: 'Arial', sans-serif;
}
h1 {
font-family: 'Georgia', serif;
}
|
在选择字体时，建议使用无衬线字体和衬线字体相结合，以便适配不同内容和环境。
字体栈
当指定字体时，可以使用字体栈来保证在目标字体不可用时，浏览器会回退至其他字体。
1
2
3
| h2 {
font-family: 'Helvetica Neue', 'Segoe UI', sans-serif;
}
|
字体大小
字体大小可以通过 font-size 属性来设置。它可以使用 px、em、rem 和 % 等单位。
1
2
3
4
5
6
7
8
9
10
11
| p {
font-size: 16px;
}
h3 {
font-size: 2em;
}
.small-text {
font-size: 75%;
}
|
字体粗细
通过 font-weight 属性控制字体的粗细。它的值可以是 normal、bold、bolder、lighter 或具体的数字值（100至900）。
1
2
3
4
5
6
7
| strong {
font-weight: bold;
}
.subtle {
font-weight: 300;
}
|
字体样式与变形
CSS允许使用 font-style 属性来设置字体的样式，常用值有 normal、italic 和 oblique。
1
2
3
4
5
6
7
| em {
font-style: italic;
}
blockquote {
font-style: oblique;
}
|
字体变换
使用 text-transform 属性可以控制文本的大小写转换，比如 uppercase、lowercase和 capitalize。
1
2
3
4
5
6
7
| h1 {
text-transform: uppercase;
}
p {
text-transform: capitalize;
}
|
行高与字间距
正确的行高和字间距会显著提升文本的可读性。line-height 和 letter-spacing 属性可以帮助实现这一点。
1
2
3
4
5
6
7
| body {
line-height: 1.5;
}
.title {
letter-spacing: 2px;
}
|
实例演示
我们可以将以上样式结合起来，创建一个简单的页面样式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体样式示例</title>
<style>
body {
font-family: 'Arial', sans-serif;
font-size: 16px;
line-height: 1.6;
color: #333;
}
h1 {
font-family: 'Georgia', serif;
font-size: 2.5em;
font-weight: bold;
text-transform: uppercase;
}
p {
margin: 0.5em 0;
}
</style>
</head>
<body>
<h1>欢迎使用CSS字体样式</h1>
<p>这是一个展示字体样式的例子。</p>
</body>
</html>
|
在这个示例中，我们利用了不同的字体类型、大小和样式来创建一个吸引人的网页标题和段落文本。
总结
通过灵活运用CSS中的各种字体样式属性，可以有效提升网页的可读性和美观度。为不同元素选择合适的字体、大小和样式，让你的网页更具吸引力。
