css字体样式相关代码汇总

在网页设计中，CSS字体样式的设置对于提升页面的视觉效果和用户体验至关重要。下面为大家汇总一些常用的CSS字体样式相关代码。

字体家族（font-family）

用于指定文本的字体。可以设置多个字体名称作为备选，以确保在用户设备上找不到首选字体时，能使用备选字体。示例代码如下：

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

字体大小（font-size）

可以使用像素（px）、百分比（%）、em等单位来设置字体大小。例如：

h1 {
  font-size: 32px;
}
p {
  font-size: 16px;
}

字体颜色（color）

通过颜色名称、十六进制值、RGB值等方式来设置字体颜色。示例：

a {
  color: #007bff;
}
span {
  color: rgb(255, 0, 0);
}

字体粗细（font-weight）

常见的值有normal（正常）、bold（加粗），还可以使用数值100 - 900来表示不同的粗细程度。代码示例：

strong {
  font-weight: bold;
}
.thin-text {
  font-weight: 200;
}

字体风格（font-style）

主要用于设置字体的风格，如斜体。常见值有normal（正常）、italic（斜体）。例如：

em {
  font-style: italic;
}

文本装饰（text-decoration）

可以添加下划线、删除线等装饰效果。常见值有none（无装饰）、underline（下划线）、line-through（删除线）。示例代码：

a {
  text-decoration: none;
}
.del-text {
  text-decoration: line-through;
}

文本对齐（text-align）

用于设置文本的对齐方式，常见值有left（左对齐）、center（居中对齐）、right（右对齐）等。例如：

h2 {
  text-align: center;
}

掌握这些CSS字体样式相关代码，能让我们在网页设计中更加灵活地控制文本的显示效果，打造出美观、专业的页面。