CSS如何设置字体样式

# CSS如何设置字体样式 在网页设计中，字体样式的设置直接影响页面的可读性和视觉体验。CSS（层叠样式表）提供了丰富的属性来控制字体样式，本文将详细介绍常用的字体样式设置方法。 ## 1. 设置字体族（font-family） `font-family`属性用于定义文本的字体。可以指定多个字体作为备选，浏览器会优先使用第一个可用的字体。 ```css p { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; } 

说明： - 字体名称包含空格或特殊字符时需加引号 - 最后通常指定通用字体族（如sans-serif、serif等）

2. 设置字体大小（font-size）

控制文字尺寸的常用属性：

h1 { font-size: 24px; /* 固定像素值 */ } body { font-size: 16px; /* 基准大小 */ } .small { font-size: 0.875em; /* 相对父元素大小 */ } .large { font-size: 1.5rem; /* 相对根元素(html)大小 */ } 

推荐：响应式设计建议使用rem或em单位

3. 设置字体粗细（font-weight）

控制文字粗细程度：

.bold { font-weight: 700; /* 等同于bold */ } .light { font-weight: 300; } .normal { font-weight: normal; /* 400 */ } 

4. 设置字体样式（font-style）

控制斜体显示：

.italic { font-style: italic; } .oblique { font-style: oblique; } .normal { font-style: normal; } 

5. 设置行高（line-height）

影响文本行间距的重要属性：

p { line-height: 1.6; /* 无单位值，表示字体大小的倍数 */ } article { line-height: 24px; /* 固定值 */ } 

6. 字体颜色（color）

设置文本颜色：

.text-red { color: #ff0000; } .text-blue { color: rgb(0, 0, 255); } .text-theme { color: var(--primary-color); /* 使用CSS变量 */ } 

7. 文本装饰（text-decoration）

控制下划线等装饰效果：

a { text-decoration: none; /* 去除链接下划线 */ } .underline { text-decoration: underline wavy red; /* 波浪下划线 */ } 

8. 字体简写属性（font）

组合多个字体属性：

.heading { font: italic 700 24px/1.2 "Microsoft YaHei", sans-serif; } 

顺序：font-style → font-weight → font-size/line-height → font-family

最佳实践建议

1. 优先使用系统默认字体保证加载速度
2. 网页正文通常16px起，行高建议1.5-1.8倍
3. 使用CSS变量管理主题字体样式
4. 移动端考虑使用-webkit-text-size-adjust防止自动缩放

通过合理组合这些属性，可以创建出既美观又易读的网页排版效果。 “`

注：本文约650字，涵盖了CSS字体样式的主要设置方法，采用Markdown格式，包含代码示例和实用建议。可根据需要调整具体内容或添加更多示例。