CSS中字体和文本样式是控制网页文字外观的核心。字体样式主要影响文字的形态，比如用什么字体、多大多粗；文本样式则控制文字的对齐、间距、装饰等排版效果。掌握这些属性是前端开发的基本功。
字体样式属性
字体样式决定了文字的字体系列、大小、粗细、倾斜等。下面详细介绍每个属性。
font-family 字体系列
font-family用于指定文字的字体名称。可以设置多个备选字体，浏览器会从左到右依次尝试。如果字体名称包含空格，需要用引号包裹。
body {
font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
}按照惯例，末尾应添加通用字体系列（如 serif、sans-serif、monospace），确保在所有系统上都有回退方案。
font-size 字体大小
font-size控制文字的大小，常用单位有 px、em、rem、% 等。注意 em 相对于父元素字体大小，rem 相对于根元素。
h1 {
font-size: 2rem; /* 32px，如果根元素font-size为16px */
}
p {
font-size: 16px;
}font-weight 字体粗细
font-weight可以取关键词如 normal（400）、bold（700）、bolder/lighter（相对于父级更粗/更细），或者数字 100-900。并非所有字体都支持如此细致的分级，通常使用 bold 或 300-700 之间的值。
.highlight {
font-weight: 600; /* 半粗体 */
}
.normal-text {
font-weight: 400;
}font-style 字体风格
font-style用于定义是否斜体，值有 normal、italic、oblique。italic 使用字体的斜体版本，oblique 是将正体字倾斜生成。
em {
font-style: italic;
}font-variant 字体变体
此属性控制小型大写字母等变体，常见值 normal 和 small-caps。不过不太常用，可以直接跳过。
font 简写属性
font可以在一行中设置多个字体属性，顺序为：font-style font-variant font-weight font-size/line-height font-family。其中 font-size 和 font-family 是必需的。
.title {
font: italic small-caps bold 24px/1.5 'Arial', sans-serif;
}注意行高（line-height）可以放在 font-size 后面用斜杠分隔。使用简写会覆盖所有单独设置的字体属性。
文本样式属性
文本样式控制文字的颜色、对齐、装饰、间距等。这些属性与字体属性不同，它们作用于文本块的整体排版。
color 文字颜色
color设置文字的颜色，支持颜色关键字、十六进制、RGB/RGBA、HSL/HSLA 等。
p {
color: #333;
}
.error {
color: rgba(255, 0, 0, 0.8);
}text-align 水平对齐
text-align控制文本在块容器内的水平对齐方式，值为 left、right、center、justify。
.center {
text-align: center;
}
.justify {
text-align: justify;
}text-decoration 文本装饰
用于添加下划线、上划线、删除线等。常见值 none、underline、overline、line-through。
a {
text-decoration: none; /* 去除链接下划线 */
}
.del {
text-decoration: line-through;
}还可以组合使用，例如 underline overline。注意该属性会继承，但如果父级设置了装饰，子元素无法直接取消，需明确设置 text-decoration: none。
text-indent 首行缩进
text-indent设置文本块第一行的缩进量，常用于段落缩进。
p {
text-indent: 2em; /* 缩进两个汉字的宽度 */
}line-height 行高
line-height设置行框的高度，影响垂直间距。无单位值时代表相对于自身 font-size 的倍数，推荐使用.
body {
line-height: 1.6; /* 自适应，可读性好 */
}如果需要固定像素值，也可以用 24px 等。
letter-spacing 字符间距
控制字符之间的额外间距，可以为负值实现紧凑效果。
h1 {
letter-spacing: 0.1em;
}
.compact {
letter-spacing: -0.05em;
}word-spacing 单词间距
仅对英文等以空格分隔的文字生效，控制单词之间的空格宽度。
.text {
word-spacing: 5px;
}white-space 空白符处理
控制元素内部空白字符的显示方式。常用值 normal（合并空白，自动换行）、nowrap（合并空白，不换行）、pre（保留空白，不换行）、pre-wrap（保留空白，自动换行）、pre-line（合并空白，但保留换行符）。
.code {
white-space: pre-wrap;
font-family: monospace;
}text-transform 大小写转换
值有 none、capitalize（首字母大写）、uppercase（全大写）、lowercase（全小写）。
.upper {
text-transform: uppercase;
}word-break 与 overflow-wrap
控制长单词或URL在换行时的行为。word-break: break-all 允许在任意字符处断开， overflow-wrap: break-word 允许在单词内断行（但尽量不拆分单词）。
.long-word {
word-break: break-all;
overflow-wrap: break-word;
}综合示例
下面是一个将字体和文本样式结合使用的HTML页面片段。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>字体与文本样式示例</title>
<style>
body {
font-family: 'Roboto', 'Microsoft YaHei', sans-serif;
font-size: 16px;
line-height: 1.6;
color: #333;
}
h1 {
font: bold 2rem/1.2 'Georgia', serif;
text-transform: uppercase;
letter-spacing: 0.1em;
text-align: center;
}
p {
text-indent: 2em;
}
.highlight {
font-weight: 600;
color: #c0392b;
}
.code-block {
font-family: 'Courier New', monospace;
background: #f4f4f4;
white-space: pre-wrap;
padding: 10px;
}
</style>
</head>
<body>
<h1>CSS字体与文本样式</h1>
<p>这是一段演示文字。其中 <span class="highlight">重点内容</span> 使用加粗和不同颜色突出。</p>
<div class="code-block">// 示例代码行
console.log("Hello, CSS!");</div>
</body>
</html>通过合理组合这些属性，可以实现丰富的排版效果。注意部分属性有继承性，例如 color、font-family、font-size、text-align、line-height 等默认会继承自父元素，而 text-decoration 虽然可以继承但子元素可覆盖。
掌握这些CSS字体与文本样式，可以让你在网页设计中对文字呈现得心应手，提升用户体验。