好的，阿杰，我帮你整理一份 CSS3 字体及相关属性的详解，包含字体设置、文本样式、字体效果等，带示例，方便理解和实际应用。

CSS3 字体及相关属性详解

1️⃣ 字体系列（font-family）

作用

指定文本使用的字体。

语法

font-family: "字体名称", 备选字体, 通用字体族;

示例

p {
  font-family: "Microsoft YaHei", "Arial", sans-serif;
}
  • 常用通用字体族
    • serif：有衬线（宋体、Times New Roman）
    • sans-serif：无衬线（微软雅黑、Arial）
    • monospace：等宽字体（Courier）
    • cursive：手写体
    • fantasy：装饰性字体

2️⃣ 字体大小（font-size）

作用

控制文本大小，可用长度、百分比或关键字。

示例

h1 {
  font-size: 24px;
}
p {
  font-size: 1em; /* 相对于父元素 */
}

常用单位

  • px：固定像素
  • em：相对父元素字体大小
  • rem：相对根元素（html）字体大小
  • %：相对父元素字体大小

3️⃣ 字体粗细（font-weight）

作用

设置字体粗细程度。

值

  • normal（400）、bold（700）
  • 数字 100~900，100 最细，900 最粗

示例

strong {
  font-weight: bold;
}
h2 {
  font-weight: 600;
}

4️⃣ 字体样式（font-style）

作用

控制字体样式，如斜体。

值

  • normal：正常
  • italic：斜体
  • oblique：倾斜（与 italic 类似）

示例

em {
  font-style: italic;
}

5️⃣ 字体变体（font-variant）

作用

控制小型大写字母等效果。

常用值

  • normal：默认
  • small-caps：小型大写字母

示例

h3 {
  font-variant: small-caps;
}

6️⃣ 文本装饰（text-decoration）

作用

添加下划线、删除线等效果。

常用值

  • none：无装饰
  • underline：下划线
  • overline：上划线
  • line-through：删除线

示例

a {
  text-decoration: underline;
}
del {
  text-decoration: line-through;
}

7️⃣ 文本对齐（text-align）

作用

控制段落或块级元素中文本的水平对齐方式。

值

  • left：左对齐
  • right：右对齐
  • center：居中
  • justify：两端对齐

示例

p {
  text-align: justify;
}
h1 {
  text-align: center;
}

8️⃣ 文本缩进（text-indent）

作用

首行缩进。

示例

p {
  text-indent: 2em;
}

9️⃣ 文本间距

字符间距（letter-spacing）

h2 {
  letter-spacing: 2px; /* 字符间距 */
}

单词间距（word-spacing）

p {
  word-spacing: 5px; /* 单词间距 */
}

行高（line-height）

p {
  line-height: 1.6; /* 行间距 */
}

10️⃣ 文本溢出（text-overflow）

作用

控制单行文本溢出显示效果。

配合使用

div {
  white-space: nowrap;     /* 不换行 */
  overflow: hidden;        /* 超出隐藏 */
  text-overflow: ellipsis; /* 用省略号显示 */
}

11️⃣ 字体导入（@font-face）

作用

自定义字体，可从网络或本地文件加载。

示例

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2"),
       url("myfont.woff") format("woff");
}

p {
  font-family: "MyFont", sans-serif;
}

12️⃣ 综合示例

<p class="fancy-text">这是一个漂亮的文字示例</p>

<style>
.fancy-text {
  font-family: "Georgia", serif;
  font-size: 18px;
  font-weight: 600;
  font-style: italic;
  font-variant: small-caps;
  text-align: center;
  text-decoration: underline;
  letter-spacing: 1px;
  word-spacing: 3px;
  line-height: 1.8;
}
</style>

🔹 总结建议

  1. font-family: 优先使用 web 安全字体或自定义字体。
  2. font-size: 推荐使用 em/rem 做响应式字体。
  3. font-weight & font-style: 提升文字层次感。
  4. text-align / line-height / letter-spacing: 提升可读性和美观度。
  5. @font-face: 支持个性化字体，注意兼容性。