上查看所有课程
CSS 字体属性用于调整 HTML 文档中文本的外观。使用 CSS 字体属性，我们可以自定义文本的字体家族、大小、粗细、样式和颜色。
body {
font-family: Helvetica;
font-size: 16px;
}这里，
font-family: Helvetica- 将主体内的文本字体家族设置为Helveticafont-size: 16px- 将主体内的文本字体大小设置为16px
基本字体属性
在 CSS 中，我们有以下七个重要的字体属性，用于更改文本的不同属性。
font-family: 定义应用于文本的字体font-size: 设置字体大小font-weight: 设置字体粗细，即增加或减轻字体的粗细度font-style: 将字体设置为斜体或倾斜font-variant: 将字体更改为小型大写字母font-stretch: 扩展或收窄文本line-height: 设置文本行之间的距离
我们将详细了解它们中的每一个。
CSS 字体家族
CSS font-family 属性用于设置网页上文本的字体。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Font Family</title>
</head>
<body>
<h1>CSS Font Family</h1>
</body>
</html>h1 {
font-family: Courier, monospace;
}浏览器输出
在上面的示例中，我们将 h1 元素的字体家族设置为 Courier, monospace。浏览器尝试以 Courier 字体渲染 h1 的文本，如果不可用，则渲染 monospace。
注意：当字体家族名称包含多个单词时，建议将其用引号括起来。例如，"Times New Roman"。
CSS 字体大小
CSS font-size 属性设置文本的大小或高度。font-size 的值可以用关键字、长度单位（px、em、rem 等）或百分比表示。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Font Size</title>
</head>
<body>
<h1>Font size: 42px</h1>
<p>Font size: 24px</p>
</body>
</html>h1 {
/*sets the font size of h1 element to 36px */
font-size: 42px;
}
p {
/* sets the font size to p element to 24px */
font-size: 24px;
}浏览器输出
CSS 字体样式
CSS font-style 属性用于将字体样式设置为 normal、italic 或 oblique。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Font Style</title>
</head>
<body>
<h1 class="normal">Normal text</h1>
<h1 class="italic">Italic text</h1>
<h1 class="oblique">Oblique text</h1>
</body>
</html>h1.normal {
font-style: normal;
}
h1.italic {
font-style: italic;
}
h1.oblique {
font-style: oblique;
}浏览器输出
CSS font-style 的可能值如下：
normal: 文本正常显示italic: 文本以斜体显示oblique: 文本倾斜，与斜体非常相似
CSS 字体拉伸
CSS font-stretch 属性用于通过允许我们从字体家族中选择 normal、expanded 或 condensed 字体来加宽或收窄文本。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Font Stretch</title>
</head>
<body>
<h1 class="condensed">Hello World</h1>
<h1 class="expanded">Hello World</h1>
</body>
</html>body {
font-family: Arial;
}
.condensed {
font-stretch: condensed;
}
.expanded {
font-stretch: expanded;
}浏览器输出
注意：如果所选字体家族不提供紧缩或扩展的字体，则此属性无效。
CSS 字体变体
CSS font-variant 用于将文本设置为 small-caps（大写字母，但字体较小）。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Font Variant</title>
</head>
<body>
<h1 class="normal">This is the normal text.</h1>
<h1 class="small-caps">This is the small caps</h1>
</body>
</html>.normal {
font-variant: normal;
}
.small-caps {
font-variant: small-caps;
}浏览器输出
CSS font-variant 样式的可能值如下：
normal: 默认值，不改变字体small-caps: 以小型大写字母显示文本initial: 将文本设置为初始值，默认值为 normalinherit: 将文本设置为其父元素的值
CSS 字体粗细
CSS font-weight 决定文本的粗细。它可以通过数字或预定义的关键字（如 bold、lighter 等）指定。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Font Weight</title>
</head>
<body>
<p>Normal Text</p>
<p class="bold">Bold Text</p>
</body>
</html>p.bold {
font-weight: bold;
}浏览器输出
可用粗细取决于当前设置的 font-family。如果指定的 font-family 不提供请求的字体粗细，浏览器将模拟近似于请求粗细的粗细度。
CSS 行高
CSS line-height 属性用于设置行框的高度。它允许独立于字体大小设置行高。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Line Height</title>
</head>
<body>
<p class="normal-value">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
a neque et turpis tristique mollis quis imperdiet purus. Nunc
molestie orci eu augue consequat, pellentesque faucibus magna
pretium. Duis at viverra ligula. Nullam aliquam, leo ut tristique
pretium, ligula arcu cursus turpis, nec rhoncus sapien urna vitae
lacus. Fusce vel consectetur diam.
</p>
<p class="numeric-value">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
a neque et turpis tristique mollis quis imperdiet purus. Nunc
molestie orci eu augue consequat, pellentesque faucibus magna
pretium. Duis at viverra ligula. Nullam aliquam, leo ut tristique
pretium, ligula arcu cursus turpis, nec rhoncus sapien urna vitae
lacus. Fusce vel consectetur diam.
</p>
</body>
</html>.normal-value {
/* specifies the normal line height */
line-height: normal;
}
.numeric-value {
line-height: 1.5; /* sets value 1.5 times the current font size : 16px x 1.5 = 24px */
}浏览器输出
CSS line-height 的可能值如下：
| 行高值 | 描述 |
|---|---|
normal |
默认值，指定正常行高 |
number |
指定一个数字，该数字与当前字体大小相乘以设置行高 |
length |
以 px、pt、cm 等设置行高 |
% |
以当前字体大小的百分比设置行高 |
initial |
将值设置为默认值，即 normal |
inherit |
从其父元素继承属性值 |
CSS 字体简写属性
CSS font 简写属性用于在单个声明中设置多个字体相关属性。此属性通过在一个地方指定所有字体属性来缩短代码。
font 属性具有以下语法：
font: font-style font-variant font-weight font-size/line-height font-family;font 简写属性至少需要 font-size 和 font-family 值才能工作。
上述简写 font 属性中提供的值的顺序必须遵循指定的顺序。如果省略其他值，则使用默认值。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Font Shorthand</title>
</head>
<body>
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
</body>
</html>h1 {
font: italic small-caps bold 24px/1.2 "Helvetica Neue", Helvetica, Arial,
sans-serif;
}
/* The above code is equivalent to
h1 {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 24px;
line-height: 1.2;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
*/浏览器输出
