font

Thu, 10 Oct 2024 00:00:00 +0800

什么是 font 属性？

在CSS中， font 属性是一个简写属性，用于设置字体的多个相关属性，包括字体大小、字体样式、字体粗细、字体系列等。使用 font 属性可以方便地在一个声明中设置多个字体相关的样式。

font 属性的语法

font: [font-style] [font-variant] [font-weight] [font-size] [line-height] [font-family];

各个属性的详细说明

font-style：设置字体的样式。

取值：
- normal：正常字体（默认值）。
- italic：斜体字。
- oblique：倾斜字体。

font-variant：设置字体的变体。

取值：
- normal：正常（默认值）。
- small-caps：小型大写字母。

font-weight：设置字体的粗细。

取值：
- normal：正常粗细（默认值）。
- bold：加粗。
- bolder：比父元素更粗。
- lighter：比父元素更细。
- 数值：可以使用 100 到 900 的数值，100 为最细，900 为最粗。

font-size：设置字体的大小。

取值：
- 可以使用绝对单位（如 px、 pt）或相对单位（如 em、 rem、 %）。

line-height：设置行高。

取值：
- 可以使用数值、单位（如 px、 em）或百分比。

font-family：设置字体系列。

取值：
- 可以指定多个字体名称，以逗号分隔，浏览器将使用第一个可用的字体。
- 例如： "Arial", "Helvetica", sans-serif。

使用 font 属性的注意事项

font 属性必须按照特定的顺序书写，尤其是 font-size 和 font-family，它们是必需的。
如果使用 font 属性，其他相关的字体属性（如 font-size 和 font-family）不能单独设置。

实例：使用 font 属性设置文本样式

HTML 代码

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Font 属性示例</title>
 <link rel="stylesheet" href="styles.css">
</head>
<body>
 <h1 class="title">欢迎来到我的网站</h1>
 <p class="description">这是一个关于CSS字体属性的示例，展示如何使用font属性设置文本样式。</p>
</body>
</html>

CSS 代码（styles.css）

body {
 font-family: Arial, sans-serif; /* 设置全局字体 */
}

.title {
 font: bold 24px/1.5 "Helvetica Neue", Arial, sans-serif; /* 设置标题字体样式 */
 color: #333; /* 字体颜色 */
}

.description {
 font: italic normal 16px/1.8 "Georgia", serif; /* 设置描述文本字体样式 */
 color: #666; /* 字体颜色 */
}

解释

HTML结构：我们创建了一个包含标题和描述的简单网页。
CSS样式：

在 .title 类中，使用 font 属性设置了字体为加粗、24px大、行高为1.5、字体系列为 "Helvetica Neue"，后备字体为 Arial 和无衬线字体。
在 .description 类中，使用 font 属性设置了字体为斜体、正常粗细、16px大、行高为1.8、字体系列为 "Georgia"，后备字体为衬线字体。

结果

通过以上代码，浏览器将展示一个标题和描述文本，标题为加粗大字体，描述为斜体较小字体。这样可以清晰地展示不同文本的样式和视觉层次感。

Font on Last Stand

font

什么是 font 属性？

font 属性的语法

各个属性的详细说明

使用 font 属性的注意事项

实例：使用 font 属性设置文本样式

HTML 代码

CSS 代码（styles.css）

解释

结果