在CSS中，控制字体的粗细和样式主要通过font-weight和font-style两个核心属性实现，这两个属性可以直接作用于文本元素，快速调整文字的视觉表现。
font-weight属性详解
font-weight用于设置字体的粗细程度，其取值可以分为关键字取值和数字取值两类。
常见取值说明
- normal：默认值，对应字体常规粗细，通常等同于数字400
- bold：粗体，通常等同于数字700
- lighter：比继承的字体粗细更细
- bolder：比继承的字体粗细更粗
- 100-900：数字取值，数值越大字体越粗，必须是100的整数倍
使用示例
以下代码展示了不同font-weight取值的实际效果：
/* 基础字体粗细设置示例 */
.normal-text {
font-weight: normal; /* 常规粗细 */
}
.bold-text {
font-weight: bold; /* 粗体 */
}
.custom-weight-text {
font-weight: 500; /* 中等粗细，介于normal和bold之间 */
}
.light-text {
font-weight: lighter; /* 比父元素字体更细 */
}
font-style属性详解
font-style用于设置字体的样式，最常用的是控制文字是否为斜体。
常见取值说明
- normal：默认值，文字正常显示，不倾斜
- italic：使用字体自带的斜体样式，需要字体本身支持斜体变体
- oblique：将正常字体强制倾斜显示，不需要字体自带斜体样式
使用示例
以下代码展示了不同font-style取值的实际效果：
/* 字体样式设置示例 */
.normal-style {
font-style: normal; /* 正常样式 */
}
.italic-text {
font-style: italic; /* 字体自带斜体 */
}
.oblique-text {
font-style: oblique; /* 强制倾斜显示 */
}
组合使用示例
实际开发中经常需要同时设置字体的粗细和样式，两个属性可以组合使用：
/* 组合设置字体粗细和样式 */
.title {
font-weight: bold; /* 粗体 */
font-style: italic; /* 斜体 */
font-size: 24px;
}
.sub-title {
font-weight: 600; /* 较粗 */
font-style: normal; /* 正常样式 */
font-size: 18px;
}
注意事项
- 部分字体的数字粗细取值可能不支持所有100-900的区间，比如某些轻量字体只有400和700两个有效取值，设置其他数值会自动映射到最近的有效值
italic和oblique的显示效果在某些字体下差异很小，如果字体没有自带斜体变体，italic会自动降级为oblique效果- 这两个属性都是可继承属性，子元素会默认继承父元素的字体粗细和样式设置，不需要重复声明
合理搭配
font-weight和font-style可以让页面文字层级更清晰，提升内容的可读性和视觉美观度，设置时需要根据设计稿的要求选择合适的取值，避免过度使用粗体或斜体导致页面杂乱。
font-weightfont-styleCSS字体样式CSS文本设置修改时间：2026-06-25 22:27:33