css设置字体粗细主要通过font-weight属性实现，使用数字值（100-900）可精确控制粗细，如300为细体、700为粗体；除normal（400）和bold（700）外，还支持lighter（更细）和bolder（更粗）关键字；设置不生效常见原因包括字体不支持、样式被覆盖、继承问题或浏览器缓存，排查方法有检查开发者工具中的样式、调整优先级、更换字体及清除缓存。例如设置h1 { font-weight: 900; }若未生效，可通过开发者工具确认是否被其他规则覆盖，并考虑使用!important强制应用样式。
CSS设置字体粗细主要通过font-weight属性实现，它允许你控制文本的粗细程度，让页面呈现出不同的视觉效果。
使用font-weight属性，你可以调整网页上的文字粗细，从而突出重点或改善整体排版。
如何使用数字值精确控制字体粗细？
font-weight可以使用数字值来精确控制字体粗细，范围从100到900，其中400通常代表normal（正常），而700代表bold（粗体）。
立即学习“前端免费学习笔记（深入）”；
例如：
p {
font-weight: 300; /* 细体 */
}
h1 {
font-weight: 700; /* 粗体 */
}
使用数字值的好处在于，你可以更精细地控制字体的粗细，而不仅仅局限于normal和bold。不过，并非所有字体都支持所有数值，实际显示效果取决于字体本身的设计。有些字体可能只有normal、bold两种粗细，即使你设置了其他数值，浏览器也会选择最接近的粗细进行显示。
关键字normal和bold之外，还有哪些常用的字体粗细关键字？
除了normal（400）和bold（700）之外，font-weight属性还支持以下关键字：
- lighter: 比继承的字体粗细更细。
- bolder: 比继承的字体粗细更粗。
- 100 – 900: 数字值，如前所述。
lighter和bolder是相对于父元素的字体粗细而言的，这在处理嵌套元素时非常有用。例如，如果你希望一个段落中的某个span元素的字体比段落的字体更粗，可以使用bolder。
<p> 这是一段文字，<span>这里更粗</span>。 </p>
需要注意的是，lighter和bolder的效果也取决于字体本身是否支持更细或更粗的字重。
字体粗细设置不生效的常见原因有哪些？如何排查？
有时候，你可能会发现设置了font-weight属性，但字体粗细并没有改变。这通常有以下几个原因：
- 字体本身不支持该粗细：如前所述，并非所有字体都支持所有字重。如果字体只支持normal和bold，那么设置其他数值可能不会生效。
- 样式被覆盖：CSS样式有优先级，如果你的font-weight样式被其他样式覆盖了，那么设置就不会生效。可以使用浏览器的开发者工具来检查样式是否被覆盖。
- 继承问题：如果父元素的font-weight设置影响了子元素，而你没有正确地覆盖它，也可能导致问题。
- 缓存问题：有时候，浏览器缓存可能导致样式没有及时更新。尝试清除浏览器缓存或使用强制刷新（Ctrl+Shift+R）来解决。
排查方法：
- 使用开发者工具：打开浏览器的开发者工具，检查元素的font-weight属性是否生效，以及是否有其他样式覆盖了它。
- 检查CSS优先级：确保你的font-weight样式具有足够的优先级，可以使用!important来强制应用样式（但不推荐过度使用）。
- 尝试不同的字体：如果怀疑是字体本身的问题，可以尝试更换其他字体，看看是否生效。
- 清除浏览器缓存：尝试清除浏览器缓存或使用强制刷新来排除缓存问题。
举个例子，假设你设置了一个h1元素的font-weight为900，但字体并没有变粗。你可以打开开发者工具，查看h1元素的样式，看看是否有其他CSS规则设置了font-weight，并且优先级更高。如果有，你可以修改CSS规则，或者使用!important来强制应用你的样式。
h1 {
font-weight: 900 !important; /* 强制应用 */
}
总之，理解font-weight属性的工作原理，以及掌握一些常见的排查方法，可以帮助你更好地控制网页上的字体粗细，提升用户体验。
暂无评论内容