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。

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

1 个答案: