CSS 字体

# CSS 字体

# 1. CSS 字体类型

在 CSS 中，有两种类型的字体系列名称：

通用字体系列 - 一组拥有相似外观的字体（如 "Serif" 或 "Monospace"）
特定字体系列 - 特定的字体（如 "Times New Roman" 或 "Courier"）

字体类型

# 2. 字体系列

font-family 属性设置文本的字体系列。为了确保字体的兼容性，应指定几个字体名称作为后备方案。如果浏览器不支持第一种字体，它将尝试下一种字体。

注意: 如果字体系列的名称超过一个字，它必须用引号包围，如："宋体"。

多个字体系列用逗号分隔：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
p.serif {font-family: "Times New Roman", Times, serif;}
p.sansserif {font-family: Arial, Helvetica, sans-serif;}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">这一段的字体是 Times New Roman</p>
<p class="sansserif">这一段的字体是 Arial</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

字体系列示例

# 3. 字体样式

font-style 属性用于指定斜体文字，常见值包括：

normal：正常显示文本
italic：以斜体字显示
oblique：文字向一边倾斜（与斜体类似，但不太常用）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
p.normal {font-style: normal;}
p.italic {font-style: italic;}
p.oblique {font-style: oblique;}
</style>
</head>
<body>
<p class="normal">这是一个段落，正常显示。</p>
<p class="italic">这是一个段落，斜体显示。</p>
<p class="oblique">这是一个段落，倾斜显示。</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

字体样式示例

# 4. 字体大小

font-size 属性用于设置文本的大小。可以使用绝对大小或相对大小来定义字体大小。

绝对大小：

设置一个具体大小的文本
不允许用户在所有浏览器中改变文本大小
当输出的物理尺寸确定时，绝对大小很有用

相对大小：

相对于周围的元素来设置大小
允许用户在浏览器中改变文字大小

注意: 如果不指定字体大小，默认大小是16像素（16px = 1em）。

# 4-1. 设置字体大小为像素

设置文字大小为像素，让您完全控制文字大小：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
h1 {font-size: 40px;}
h2 {font-size: 30px;}
p {font-size: 14px;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>允许在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。</p>
<p><b>注意:</b>这个例子在 IE9之前的版本不工作。</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

字体大小示例

虽然可以通过浏览器的缩放工具调整文本大小，但这种调整是整个页面的缩放，而不仅仅是文本。

# 4-2. 用 em 设置字体大小

为了避免 Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。em 的尺寸单位由 W3C 推荐，1em 等于当前字体大小的默认值。在浏览器中默认的文字大小是16px，因此，1em 的默认大小是16px。可以通过以下公式将像素转换为 em：px/16=em

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
h1 {font-size: 2.5em;} /* 40px/16=2.5em */
h2 {font-size: 1.875em;} /* 30px/16=1.875em */
p {font-size: 0.875em;} /* 14px/16=0.875em */
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>使用 em 单位，允许在所有浏览器中调整文本大小。</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

em 单位字体大小示例

在上面的例子中，em 的文字大小与前面的像素示例相同。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。

# 4-3. 使用百分比和 em 组合

在所有浏览器中，设置 <body> 元素的默认字体大小为百分比是一种解决方案：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
body {font-size: 100%;}
h1 {font-size: 2.5em;}
h2 {font-size: 1.875em;}
p {font-size: 0.875em;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

百分比和 em 组合示例

# 5. 所有 CSS 字体属性

以下是常见的 CSS 字体属性：

font-family：设置字体系列
font-style：设置字体样式（如 normal, italic, oblique）
font-weight：设置字体粗细（如 normal, bold, bolder, lighter, 100-900）
font-size：设置字体大小
font-variant：设置小型大写字母（如 normal, small-caps）
line-height：设置行高

通过灵活运用这些字体属性，您可以实现各种复杂的文本样式和效果，提高网页的视觉吸引力和可读性。

编辑此页

上次更新: 2024/12/28, 18:32:08

← CSS 文本格式 CSS 链接→