css怎么去掉字体粗体样式

来源：个人站长网作者：小白龙头衔：草根站长

导读：本期聚焦于小伙伴创作的《css怎么去掉字体粗体样式》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《css怎么去掉字体粗体样式》有用，将其分享出去将是对创作者最好的鼓励。

在css中，控制文字粗细的属性是font-weight，要去掉字体的粗体样式，本质上就是将font-weight的取值调整为普通粗细对应的数值或关键词。我们可以通过多种方式来修改这个属性，适配不同的开发场景。

css怎么去掉字体粗体样式

font-weight属性常用取值说明

首先我们需要了解font-weight的常见取值，这样才能准确选择去掉粗体的对应值：

这是最直接的方式，将目标元素的font-weight设置为normal即可恢复普通粗细：

/* 去掉所有p标签的粗体样式 */
p {
    font-weight: normal;
}

/* 去掉类名为title的元素粗体 */
.title {
    font-weight: normal;
}

因为400和normal是等价的，所以也可以直接设置数值400来达到去掉粗体的效果：

/* 去掉id为subtitle的元素粗体 */
#subtitle {
    font-weight: 400;
}

/* 去掉所有h1标签的粗体，覆盖默认的h1粗体样式 */
h1 {
    font-weight: 400;
}

如果只需要修改单个元素的样式，也可以直接使用内联样式设置font-weight：

<p style="font-weight: normal;">这段文字是普通粗细，没有粗体效果</p>
<span style="font-weight: 400;">这段文字也是普通粗细</span>

如果子元素的粗体是继承父元素的，只需要给子元素单独设置font-weight为normal即可覆盖继承的样式：

/* 父元素设置了粗体 */
.parent {
    font-weight: bold;
}

/* 子元素单独设置去掉粗体 */
.child {
    font-weight: normal;
}

<div class="parent">
    我是父元素，文字是粗体
    <span class="child">我是子元素，文字是普通粗细</span>
</div>

需要注意部分HTML标签默认带有粗体样式，比如<h1>到<h6>标题标签、<strong>标签、<b>标签等，如果需要去掉这些标签的默认粗体，也需要显式设置font-weight为normal：

/* 去掉所有标题标签的默认粗体 */
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

/* 去掉strong标签的默认粗体 */
strong {
    font-weight: normal;
}

另外如果font-weight设置后没有生效，需要检查是否有其他更高优先级的样式覆盖了当前设置，可以通过浏览器开发者工具查看元素的样式优先级，调整选择器的权重来保证设置生效。

免责声明：已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰，观点力求客观中立。本站旨在免费分享，内容仅供个人学习、研究或参考使用。若引用了第三方作品，版权归原作者所有。如内容涉及您的权益，请联系我们处理。