未使用<b>标签却自动加粗的段落文本如何取消加粗？

问题描述 #

段落文本没加<b>标签，也没手动设加粗权重，却自动显示成加粗状态；试了font-weight: lighter完全没用，确认没有其他CSS影响这个段落，想把文本改成正常非加粗状态。

相关代码 #

CSS代码

.Desc p {
  font-size: 15px;
  font-weight: lighter;
  position: relative;
  color: black;
  margin: 50px;
  height: 200px;
  background-color: rgba(138, 138, 138, 0.441);
}

HTML代码

<div class="Desc">
  <h1>Welcome to Tea-rrific</h1>
  <p>Tea-rrific is a healthy alternative to other teas on the market. It contains antioxidants and vitamins which help boost your immune system and keep you healthy during cold and flu season. Tea-rrific tastes great without any added sugars or artificial
    sweeteners like many other teas on the market. And it's eco friendly because it uses biodegradable bags instead of plastic ones that pollute our oceans!<br>Tea-rrific is a small company based in the UK, creating small batch blends of high quality,
    ethical and sustainable whole leaf tea. We’re here to bring you tea that’s fun, functional and tasty!</p>
</div>

解决办法 #

1. 直接指定font-weight为normal
   lighter是相对父元素的字重，如果父元素本来就是正常字重，lighter可能因为字体没有更细的版本而无效，换成normal（对应字重400）是最直接的：

   .Desc p {
     /* 其他样式保留 */
     font-weight: normal;
   }
   

2. 用浏览器开发者工具排查真实样式
   按F12打开开发者工具，选中这个p元素，查看「计算样式」里的font-weight值，确认是不是有继承的加粗样式（比如body或父级div被设置了font-weight: bold），找到后针对性覆盖。

3. 指定字体避免默认粗体问题
   有些系统默认字体的常规字重看起来偏粗，给p标签指定一个常见字体：

   .Desc p {
     /* 其他样式保留 */
     font-family: "Helvetica Neue", Arial, sans-serif;
     font-weight: normal;
   }
   

4. 检查字体文件（如果自定义了字体）
   如果页面用了自定义字体，确认加载的字体包包含normal（400）字重的版本，要是只有bold（700）版本，浏览器只能显示加粗效果。

内容的提问来源于stack exchange，提问作者Kameron