我一直在不同的设备上测试我的网页,文本在设备像素比较高的设备(例如 iPhone)上显得更粗。我也在 chrome 模拟器上对此进行了测试:文本在 DPR 1 下看起来很完美,在 DPR 2 下显得更粗。
在 DPR 1
AT 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%;
}
这是最相关的代码,其余的是对齐和媒体查询字体大小。
最佳答案
@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 上并没有太大的区别
看起来不错:)
关于html - CSS - 字体在具有更高 dpi 的设备上显得更粗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46863948/