font-weight,
时间: 2025-05-01 20:35:43 浏览: 30
### CSS `font-weight` 的使用方法及效果
#### 一、基本概念
`font-weight` 是用于设置字体粗细的 CSS 属性。其取值可以是关键字(如 `normal`, `bold`),也可以是数值(范围从 100 到 900,步长为 100)。其中,400 等价于 `normal`,而 700 等价于 `bold`[^3]。
#### 二、具体应用案例
以下是一个典型的例子展示如何通过不同的 `font-weight` 设置来调整文字样式:
```css
p {
text-align: left;
font-family: 'Robot', Arial, Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
.p1 {
font-weight: 400; /* 正常字重 */
}
.p2 {
font-weight: 400;
-webkit-text-stroke: 0.6px rgba(23, 39, 64, 0.75); /* 添加描边效果 */
}
```
上述代码片段展示了两个类 `.p1` 和 `.p2` 中的文字均设置了相同的 `font-weight` 值 400,但由于额外加入了 `-webkit-text-stroke` 描边属性,在视觉上可能会有细微差异[^1]。
#### 三、常见问题解析
在实际开发过程中,UI 设计师通常会提供诸如 Regular、Normal、Medium 或 Light 这样的字重名称,而非具体的数值。开发者需要将其转换成对应的 `font-weight` 数值。以下是常见的映射关系表:
- **Regular/Normal**: 映射到 `400`
- **Bold**: 映射到 `700`
- **Light**: 可能对应较低的权重,比如 `100` 或 `200`[^2]
需要注意的是,并不是所有的字体都支持完整的 `font-weight` 范围。如果指定的值超出了当前字体的支持范围,则浏览器会选择最接近的一个替代值。
#### 四、注意事项
当尝试实现复杂的文本渲染时,除了单纯依赖 `font-weight` 外部特性外,还可以结合其他 CSS 属性一起工作,例如上面提到的 `-webkit-text-stroke` 来增强特定场景下的显示效果。
---
###
阅读全文