【css字体样式有几种】在网页设计中，CSS（层叠样式表）是控制网页外观的重要工具，而字体样式则是影响页面可读性和视觉效果的关键因素。了解常见的CSS字体样式有助于开发者更灵活地设计网页。以下是常见的CSS字体样式分类和用法总结。
一、CSS字体样式分类
1. 字体系列（Font Family）
定义网页中使用的字体类型，如宋体、微软雅黑、Arial等。
2. 字体大小（Font Size）
控制文字的大小，通常以像素（px）、百分比（%）或相对单位（em、rem）表示。
3. 字体粗细（Font Weight）
控制字体的粗细程度，如normal、bold、bolder、lighter或数值（如100~900）。
4. 字体样式（Font Style）
控制字体是否倾斜，如normal、italic、oblique。
5. 字体变体（Font Variant）
控制字体是否使用小型大写字母，如normal、small-caps。
6. 字体装饰（Text Decoration）
控制文字的下划线、删除线、上划线等效果，如none、underline、overline、line-through。
7. 字体间距（Letter Spacing）
控制字符之间的间距，可以设置为固定值或关键词（如normal）。
8. 文本对齐（Text Align）
控制文字在容器中的对齐方式，如left、right、center、justify。
9. 行高（Line Height）
控制文字行与行之间的垂直间距，影响阅读体验。
10. 字体颜色（Color）
设置文字的颜色，支持多种颜色格式，如十六进制、RGB、HSL、颜色名称等。
二、常见CSS字体样式总结表
| 样式名称 | 属性名 | 常见值示例 | 说明 |
| 字体系列 | font-family | '微软雅黑', 'Arial', 'Times New Roman' | 定义文字使用的字体 |
| 字体大小 | font-size | 16px, 1.2em, 20% | 控制文字的大小 |
| 字体粗细 | font-weight | normal, bold, 700 | 控制字体的粗细程度 |
| 字体样式 | font-style | normal, italic, oblique | 控制字体是否倾斜 |
| 字体变体 | font-variant | normal, small-caps | 控制是否使用小型大写字母 |
| 文本装饰 | text-decoration | none, underline, line-through | 控制文字的下划线、删除线等 |
| 字符间距 | letter-spacing | 2px, 0.5em, normal | 控制字符之间的水平间距 |
| 文本对齐 | text-align | left, center, right, justify | 控制文字在容器中的对齐方式 |
| 行高 | line-height | 1.5, 24px, 120% | 控制文字行与行之间的垂直间距 |
| 字体颜色 | color | 000000, rgb(0,0,0), black | 设置文字的颜色 |
三、小结
CSS字体样式丰富多样，合理使用这些属性可以显著提升网页的美观度和可读性。通过组合不同的字体样式，开发者可以创建出符合设计需求的文本效果。掌握这些基本样式属性，是进行高效网页开发的基础之一。
