将div放在屏幕中间后，字体变为像素化

Question

提供的div内的字体是像素化的（h3，p）。我不认为它是我的电脑或浏览器设置，因为div外的字体不是像素化的。像素化的外观发生在将div放在.popupBoxWrapper中屏幕中间的位置之后。这里是与div相关的代码，任何想法可能会导致问题？

HTML：

<div id="popupBoxOnePosition"> 
    <div class="popupBoxWrapper"> 
    <div class="popupBoxContent"> 
     <a href="javascript:void(0)" onclick="toggle_visibility('popupBoxOnePosition');"> 
     <button class="close" onclick="document.getElementById('popup').style.display='none'">X</button> 
     </a> 
     <h3>Title</h3> 
     <p>Example</p> 
     <p>lineone</p> 
     <p style="font-size: 15px;">Follow us on Instagram @sharegoodmessages</p> 
     <p style="font-size: 15px;">Follow us on Twitter @SgmEnglish</p> 
     <br> 
     <p style="font-size: 15px;">Developed by example</p> 
    </div> 
    </div> 
</div> 
<div id="wrapper"> 

    <a class="icon" href="javascript:void(0)" onclick="toggle_visibility('popupBoxOnePosition');"><img src="info_button.png"></img> 
    </a> 

</div> 

CSS：

#popupBoxOnePosition{ 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 120%; 
    display: none; 
    position:fixed; 
    z-index: 1; 
    overflow: hidden; 
} 

.popupBoxWrapper{ 
    display: block; 
    width: 500px; 
    text-align: left; 
    position:fixed; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
} 

.popupBoxContent{ 
    background-color: GhostWhite; 
    padding: 15px; 
    padding-left: 35px; 
    padding-right: 35px; 
    display: block; 
} 

.close{ 
    border:0px; 
    float: right; 
    color: black; 
    cursor: pointer; 
    background-color: GhostWhite; 
    display: block; 
    position: absolute; 
    top: 18px; 
    right: 25px; 
    text-align: right; 
    margin: 0; 
    padding: 0; 
    text-decoration: none; 
    white-space:pre-wrap; 
} 

Answer 1

问题可能仅occure在您的浏览器或操作系统，这取决于像素rendring。所选字体也可能有影响。

快速，方便，你可以尝试将它添加到CSS：

.popupBoxContent { 
    -webkit-font-smoothing: antialiased; 
} 

或者这个使用字体的文本（从this answer被盗）：

// try around, find the setting that fits your font-size 
webkit-text-stroke: 0.6px; 

// alternative RGBa syntax, allows finer settings with alpha-transparency 
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.1); 

反正有很多这些答案更深入地回答了它发生的原因，并且可能没有任何简单的解决方案。您还可以阅读更多here。