html - 在 css 中缩放后文本变得模糊

Question

我正在使用缩放变换来缩放 html 中的 div，但其中的文本变得模糊。有什么办法可以使文本清晰如初

@keyframes scaleText {
  from {
    transform: scale(0.5, 0.5);
  }
  to {
    transform: scale(2, 2);
  }
}

#para1Six {
  color: black;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  font-size: 19px;
  font-family: 'Sacramento', cursive;
  z-index: 2;
}
#wrapper 
{
  width: 500px;
  margin: 0 auto;
  animation-name: scaleText;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

<div id="wrapper">
  <div class="envelope open">
    <div class="flap front"></div>
    <div class="flap top"></div>
    <div class="letter">
      <p id="para1Six">
        Hello World
      </p>
    </div>
  </div>

Answer 1

您可以不按比例变换文本。

分别对文本使用font-size，对div 使用transform:scale()。