將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。