文本与字体

4. 文本与字体

4.1 文本属性

字体、字号、行高：

• font-family：指定文本使用的字体。
• font-size：设置文本的字号。
• line-height：设置文本行高，即行间距。

示例代码：

.text-example {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

解释：

• font-family: 'Arial', sans-serif; 使用 Arial 字体，如果没有 Arial，则使用系统默认的无衬线字体。
• font-size: 16px; 设置字体大小为 16px。
• line-height: 1.5; 设置行高为 1.5 倍的字体大小，以提高可读性。

文本对齐、装饰：

• text-align：设置文本的水平对齐方式（如 left, right, center, justify）。
• text-decoration：设置文本的装饰（如 underline, overline, line-through, none）。

示例代码：

.text-align-example {
  text-align: center;
  text-decoration: underline;
}

解释：

• text-align: center; 将文本居中对齐。
• text-decoration: underline; 给文本添加下划线。

文本阴影：

• 使用 text-shadow 属性可以为文本添加阴影效果。

示例代码：

.text-shadow-example {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

解释：

• text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 为文本添加一个 2px 向右、2px 向下的阴影，模糊半径为 4px，颜色为黑色并带有 50% 透明度。

4.2 字体

自定义字体：

• 使用 @font-face 可以引入自定义字体文件。

示例代码：

@font-face {
  font-family: 'CustomFont';
  src: url('custom-font.woff2') format('woff2'),
       url('custom-font.woff') format('woff');
}

.custom-font-example {
  font-family: 'CustomFont', sans-serif;
}

解释：

• @font-face 声明了一个自定义字体 CustomFont，并指定了字体文件的 URL 和格式。
• .custom-font-example 元素将使用自定义字体 CustomFont，如果无法加载则使用系统默认的无衬线字体。

字体系列和字体权重：

• font-family：设置字体系列，包括备选字体。
• font-weight：设置字体的粗细（如 normal, bold, 100, 200, …, 900）。

示例代码：

.font-weight-example {
  font-family: 'Georgia', serif;
  font-weight: bold;
}

解释：

• font-family: 'Georgia', serif; 使用 Georgia 字体，如果无法加载则使用系统默认的衬线字体。
• font-weight: bold; 将字体设置为粗体。

字体变体：

• font-style：设置字体样式（如 normal, italic, oblique）。
• font-variant：设置字体变体（如 normal, small-caps）。

示例代码：

.font-style-example {
  font-style: italic;
  font-variant: small-caps;
}

解释：

• font-style: italic; 将文本设置为斜体。
• font-variant: small-caps; 将文本变为小型大写字母。

---