html - 将 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

问题可能只发生在您的浏览器或操作系统中，具体取决于像素渲染。所选字体也可能会产生影响。

您可以尝试将其添加到 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 .