CSS - 在高dpi设备上字体看起来更粗体

Question

CSS - 在高dpi设备上字体看起来更粗体

htmlcss

5

我一直在不同设备上测试我的网页，发现在DPR（设备像素比）更高的设备上文字会变得更加粗体（例如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%;
}

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

- Rimil Dey

想知道这只是在浏览器调试时出现的问题，还是在具有更高DPR的移动设备上也是如此。 - Persijn

您是否已经尝试过玩转text-rendering属性？https://developer.mozilla.org/de/docs/Web/CSS/text-rendering 此外，您可以使用像素比媒体查询，在更高像素密度下强制使用较少粗体字体：https://css-tricks.com/snippets/css/retina-display-media-query/ - Constantin Groß

1

@Persijn - 我已经在实际的物理设备上进行了检查，文本显示为粗体。 - Rimil Dey

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Justin Battaglia · Accepted Answer

@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;
  }
}

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

我不知道还有其他方法可以做到这一点，因为即使数字相同，字重也总是不同的。此外，在DPR 2.0上并没有太大的区别。

看起来很好 :)