MDN项目：CSS文本与字体样式基础教程

前言

在网页开发中，文本样式处理是最基础也是最重要的技能之一。本文将深入讲解CSS中文本和字体样式的基础知识，帮助开发者掌握如何优雅地控制网页文本的呈现效果。

文本样式基础概念

文本渲染原理

浏览器渲染文本时，会遵循以下基本规则：

1. 文本从元素内容区域的左上角开始（RTL语言则从右上角开始）
2. 沿行方向流动直至行尾
3. 自动换行后继续下一行的渲染
4. 这个过程会持续到所有内容都被放置在盒子中

文本样式分类

CSS文本样式主要分为两大类：

1. 字体样式：控制文本的字体特征

   • 字体族（font-family）
   • 字号（font-size）
   • 字重（font-weight）
   • 字体样式（font-style）

2. 文本布局样式：控制文本的排版特征

   • 行高（line-height）
   • 字间距（letter-spacing）
   • 文本对齐（text-align）
   • 文本装饰（text-decoration）

字体样式详解

字体颜色

使用color属性设置文本颜色：

p {
  color: #ff0000;  /* 红色 */
}

颜色值可以是：

• 十六进制值（#RRGGBB）
• RGB/RGBA值
• HSL/HSLA值
• 颜色名称（如red）

字体族与字体栈

基本用法

body {
  font-family: Arial;
}

Web安全字体

这些字体在大多数操作系统中都可用：

字体名称	类型	备注
Arial	sans-serif	建议同时添加Helvetica作为备选
Courier New	monospace	建议同时添加Courier作为备选
Georgia	serif
Times New Roman	serif	建议同时添加Times作为备选
Trebuchet MS	sans-serif	移动端支持有限
Verdana	sans-serif

通用字体族

CSS定义了5种通用字体族：

1. serif - 衬线字体（如Times New Roman）
2. sans-serif - 无衬线字体（如Arial）
3. monospace - 等宽字体（如Courier New）
4. cursive - 手写体
5. fantasy - 装饰性字体

字体栈最佳实践

p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

注意事项：

• 包含空格的字体名应该用引号包裹
• 最后总是添加一个通用字体族
• 避免使用与CSS关键字冲突的字体名

字号控制

常用单位：

1. px - 像素（绝对单位）
2. em - 相对于父元素字体大小
3. rem - 相对于根元素(html)字体大小

html {
  font-size: 16px; /* 默认值 */
}

article {
  font-size: 1.5rem; /* 24px */
}

p {
  font-size: 0.833em; /* 20px (基于24px计算) */
}

建议优先使用rem单位，计算更直观。

字体变体

1. font-style - 控制斜体

   p {
     font-style: italic; /* 斜体 */
   }
   

2. font-weight - 控制字重

   h1 {
     font-weight: bold; /* 粗体 */
     /* 或使用数值：100-900 */
   }
   

3. text-transform - 文本转换

   h2 {
     text-transform: uppercase; /* 大写 */
   }
   

4. text-decoration - 文本装饰

   a {
     text-decoration: underline; /* 下划线 */
   }
   

文本布局样式

文本对齐

p {
  text-align: center; /* 居中 */
  /* 可选值：left | right | center | justify */
}

行高控制

article {
  line-height: 1.5; /* 无单位，基于当前字体大小 */
}

最佳实践：使用1.5-2.0之间的值提高可读性

字间距与词间距

h1 {
  letter-spacing: 2px; /* 字符间距 */
  word-spacing: 5px;   /* 单词间距 */
}

文本效果

.title {
  text-effect: 2px 2px 2px rgba(0,0,0,0.5);
  /* 参数：水平偏移 垂直偏移 模糊半径 颜色 */
}

综合示例

<h1 class="title">网页标题</h1>
<p class="intro">这是一个介绍段落...</p>

.title {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: #333;
  text-effect: 1px 1px 1px #ccc;
  letter-spacing: 1px;
}

.intro {
  font-family: Georgia, serif;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #444;
}

总结

掌握CSS文本样式是前端开发的基础技能。通过合理组合各种字体和文本属性，可以创建出既美观又易读的网页文本效果。建议开发者：

1. 始终设置字体栈，确保兼容性
2. 使用相对单位（rem/em）实现响应式排版
3. 保持适当的行高提升可读性
4. 谨慎使用装饰性效果，避免过度设计

通过实践这些原则，你将能够创建专业级的网页文本样式。