CSS - 字体在具有更高dpi的设备上显得更大胆

Question

我一直在不同设备上测试我的网页，文本在设备像素比率更高的设备上显得更大（例如iPhone）。我也在Chrome模拟器上对此进行了测试：文本在DPR 1看起来很完美，在DPR 2上显得更加大胆。

在DPR 1

在DPR 2

有没有办法修复或减少效果？任何帮助将不胜感激。

HTML：

<div class="section" id="section3">
  <h1>Projects</h1>
</div>

CSS：

/*to fix safari bold font*/
h1, h2, h3, h4, h5, strong, b {
  font-weight: 400;
}

#section4 h1,#section3 h1 {
  visibility: hidden;
  position: absolute;
  font-family: Graphik-Semibold, Roboto;
  font-weight: 600;
  margin: 0;
  top: 3.7%;
}

这是最相关的代码，其余是对齐和媒体查询字体大小。

Answer 1

@media only screen and (max-device-pixel-ratio: 2) {
  b {
    font-weight: 600;
  }
}

@media only screen and (min-device-pixel-ratio: 2) {
  b {
    font-size: 400;
  }
}

您可能需要更改一些数字以获得您想要的结果，这只是一个示例。

我知道没有其他任何方法可以做到这一点，因为即使数字相同，font-weight也总是不同。另外，在DPR 2.0上并没有那么大的差异

看起来不错：）