我已经在不同的设备上测试了我的网页,并且在具有更高设备像素比率的设备(例如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的区别并不大
看起来不错 :)