React文字加粗在不同设备失效：屏幕类型是否影响该效果？

核心结论 #

文字加粗效果确实会受屏幕类型影响，但更多是字体特性、CSS设置和浏览器渲染逻辑共同作用的结果，屏幕类型只是次要因素。

具体分析 #

1. 屏幕类型的影响

   • 不同屏幕（如Retina/非Retina、OLED/LCD）的像素密度和显示技术差异，会让字体渲染的精细度不同，尤其是浏览器自动生成的"模拟加粗"效果，在低分辨率屏幕上可能显得模糊或不一致。
   • 但原生支持加粗字重的字体，在不同屏幕上的显示差异会小很多。

2. 你的代码中的潜在问题

   • 同时使用<b>标签和font-weight: bolder：<b>标签默认会应用浏览器的加粗样式，而bolder是相对父元素的字重值，不同浏览器/设备对相对字重的计算规则可能不一致，导致显示波动。
   • 如果当前使用的字体没有提供bolder对应的字重变体，浏览器会自动拉伸普通字重的字体来模拟加粗，这种模拟效果在不同设备上的表现差异极大。

修复方案 #

1. 改用具体的字重数值

把font-weight: bolder替换为明确的数值（如700，对应标准加粗），避免相对值带来的不确定性：

.info-text {
  font-size: 14px;
  font-weight: 700; /* 替换bolder为具体数值 */
  line-height: 24px;
  color: #15366D;
}

2. 统一语义标签与CSS的作用

可以保留<b>标签（如果需要语义化），但确保CSS的字重设置明确；或者改用<span>标签，完全通过CSS控制样式：

// 方案A：保留<b>标签，配合明确的CSS字重
function App() {
  return (
    <b className="info-text">Info: </b>
  );
}

// 方案B：改用span标签，纯CSS控制
function App() {
  return (
    <span className="info-text">Info: </span>
  );
}

3. 确保字体支持目标字重

如果使用自定义字体，要确保引入的字体文件包含对应字重（如700）的版本，避免浏览器模拟加粗。

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