font-weight 用于设置字体粗细，支持 normal、bold 及 100–900 数值，font-style 用于设置倾斜样式，包括 normal、italic 和 oblique，两者结合可提升文本层次与可读性。
在网页设计中，文字的呈现效果直接影响用户的阅读体验。CSS 提供了多种方式来控制字体样式，其中 font-weight 和 font-style 是两个最常用且基础的属性，分别用于设置字体的粗细和倾斜样式。下面对这两个属性进行详细解析。
font-weight：控制字体粗细
font-weight 属性用来定义文本的粗细程度。它支持关键字和数值两种写法，能更精细地匹配不同字体提供的字重。
常见取值包括：
- normal：标准字重，等同于 400
- bold：加粗，等同于 700
- bolder：比父元素更粗
- lighter：比父元素更细
- 100–900：以100为单位的数值，400为正常，700为加粗，其他取决于字体是否支持
注意：并非所有字体都支持全部9个字重。例如，某些字体可能只包含 400 和 700 两种字重，其余数值将自动就近匹配。使用时建议配合 google Fonts 等服务选择多字重字体，如 “Inter” 或 “Roboto”，以获得更好效果。
font-style：设置文字倾斜
font-style 主要用于控制文本是否以斜体显示，适用于强调或区分引用内容等场景。
立即学习“前端免费学习笔记（深入）”；
主要取值有：
- normal：正常样式，不倾斜
- italic：使用字体的斜体版本（如果可用）
- oblique：浏览器对字符进行倾斜模拟，即使没有斜体字体也能实现倾斜效果
区别在于：italic 使用字体自带的斜体设计，通常更美观；而 oblique 是通过算法倾斜常规字形生成的，视觉上略显生硬。现代字体如 “Open Sans” 通常提供真正的 italic 版本，优先推荐使用 italic。
实际应用建议
合理搭配这两个属性可以提升页面层次感。比如：
- 标题使用
font-weight: 600实现半粗体，避免过度强烈的 bold - 引用文字设置
font-style: italic增强语义表达 - 轻量级界面可尝试
font-weight: 300搭配细字体营造简洁感
同时，在使用自定义字体时，记得通过 @font-face 明确声明不同字重和样式的对应文件，确保浏览器正确加载。
基本上就这些。掌握 font-weight 和 font-style 的用法，是打造专业排版的第一步，理解它们的取值逻辑和实际渲染机制，能帮助你更精准地控制页面文字表现。