CSS字体与文本样式属性包括font-family、font-size、font-weight、font-style等控制字体外观，text-align、text-indent、line-height等管理文本布局，结合color、text-shadow增强视觉效果，通过@font-face引入自定义字体，合理组合提升可读性与设计表现。
CSS 提供了丰富的字体和文本样式属性，用于控制文字的外观和排版。以下是常用的字体与文本样式的分类说明：
字体样式（Font Properties）
这些属性用于设置字体的类型、大小、粗细、风格等：
- font-family：定义字体族，如 "Arial", "Times New Roman", sans-serif 等。
- font-size：设置文字大小，可用单位包括 px、em、rem、%、pt 等。
- font-weight：控制字体粗细，如 normal、bold 或具体数值 400、700 等。
- font-style：设置字体风格，常用值为 normal、italic（斜体）、oblique（倾斜）。
- font-variant：控制是否使用小型大写字母，如 normal、small-caps。
- font：复合属性，可同时设置 font-style、font-weight、font-size、line-height 和 font-family。
文本样式（Text Properties）
这些属性用于控制文本的布局、对齐、装饰等视觉效果：
- color：设置文字颜色，支持关键字、十六进制、rgb()、rgba()、hsl() 等格式。
- text-align：定义文本水平对齐方式，如 left、right、center、justify。
- text-decoration：添加文本装饰线，如 underline（下划线）、overline（上划线）、line-through（删除线），也可用 none 去除默认装饰。
- text-transform：控制字母大小写转换，如 uppercase（大写）、lowercase（小写）、capitalize（首字母大写）。
- text-indent：设置段落首行缩进。
- line-height：定义行高，影响文本行之间的垂直间距。
- letter-spacing：调整字符间距。
- word-spacing：调整单词之间的间距。
- white-space：控制空白符（空格、换行）的处理方式，如 nowrap、pre、pre-wrap 等。
- text-shadow：为文字添加阴影效果，可设置模糊半径、偏移和颜色。
- text-overflow：定义溢出文本如何显示，如 clip（裁剪）、ellipsis（省略号）。
- direction 和 unicode-bidi：控制文本书写方向，用于支持 RTL（从右到左）语言。
字体加载与自定义（@font-face）
通过 @font-face 规则可以引入自定义字体文件，实现网页中使用非系统字体：
立即学习“前端免费学习笔记（深入）”；
- 指定字体名称（font-family）和字体文件路径（src: url(...)）。
- 支持多种格式：woff、woff2、ttf、eot 等，推荐优先使用 woff2。
- 可针对不同字重和样式分别加载对应字体文件。
常见组合建议
实际开发中常将多个属性组合使用以提升可读性和美观度：
- 设置基础字体族时，建议在末尾保留通用族（如 sans-serif）作为后备。
- 使用 rem 或 em 设置字体大小，便于响应式设计。
- 避免过度使用 text-shadow 或过大的 letter-spacing，以免影响可读性。
- 长段落文本推荐 line-height 在 1.4 到 1.6 之间。
基本上就这些核心的字体与文本样式。合理使用它们能让页面文字更清晰、专业且具有表现力。
