CSS字体属性详解：font-family与font-style

本文档是关于CSS辅助文档的，主要关注`font`属性的使用，以及与CSS布局相关的字体设置技巧。 在CSS中，`font`属性是一个复合属性，允许开发者一次性设置多个字体相关的属性，如字体家族、字体大小、字体样式等。这个属性简化了代码，使得CSS更易于阅读和维护。`font`属性可以包含`font-family`、`font-size`、`font-weight`、`font-style`等子属性。 1. **字体系列 (font-family)** `font-family`属性用于设置元素的字体，可以指定一个或多个字体，以备浏览器在找不到首选字体时使用。字体列表应按照优先级从高到低排列。推荐在列表末尾添加一个通用字体族（如`sans-serif`或`serif`），作为回退选项，确保即使用户计算机上没有安装任何指定字体，也能保证文字可读性。 示例： ``` h1 {font-family: Arial, Verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;} ``` 在这些例子中，`h1`标题将尝试使用Arial，如果Arial不可用，则使用Verdana，最后使用无衬线字体（sans-serif）家族中的一个字体。对于`h2`标题，首先尝试使用`Times New Roman`，然后是衬线字体（serif）家族。 2. **字体样式 (font-style)** `font-style`属性用于设定文本的样式。其值可以是`normal`（默认样式）、`italic`（斜体）或`oblique`（倾斜）。例如，以下代码会让所有的`h2`标题显示为斜体： ``` h2 {font-style: italic;} ``` 当文本需要呈现特殊风格，如强调或区分，可以使用这个属性。 3. **字体加粗 (font-weight)** `font-weight`属性用来设置字体的粗细。常见的值包括`normal`、`bold`、数值（100-900）等。例如，`bold`会使文本变粗，而`normal`则保持默认的重量。 ``` h1 {font-weight: bold;} ``` 4. **字体大小 (font-size)** `font-size`属性用于设定字体的大小，可以使用绝对单位（如px）或相对单位（如em、rem）来定义。使用相对单位可以实现响应式的文本大小调整。 ``` p {font-size: 16px;} h1 {font-size: 2em;} ``` 在这个例子中，`p`元素的字体大小为16像素，而`h1`标题的大小是基于其父元素字体大小的两倍。 通过理解并熟练运用这些CSS字体属性，开发者可以创建出丰富的文本样式，提升网页的视觉效果和用户体验。同时，合理的字体设置也是网页可读性和无障碍性的重要组成部分。在实际开发中，应考虑不同用户的设备和浏览器兼容性，确保字体的正确显示。