Html 如何防止在CSS缩放转换期间更改Webkit文本呈现

如何防止文本权重形式在转换期间和转换后变为粗体？在将鼠标悬停在任何元素上之前，文本都是良好的。 将鼠标悬停在某个元素上后，该元素会向上缩放，但会变为粗体，因此在缩放后（假定为原始状态），该元素仍然是粗体的

HTML

以前尝试过的解决方案（无效）：

• 使用CSS背面可见性属性来解决此问题。参考这个
• 使用-webkit转换：translateZ（0px）
• 在车身上使用以下样式
  • 计数器重置：项目
  • 文本呈现：几何精度
  • webkit字体平滑：抗锯齿
  • moz osx字体平滑：灰度

我从哪里得到这些解决方案的一些相关问题：

---

我目前使用的解决方法是：

替换：变换：缩放（1.1）

使用：变换：透视（1px）比例（1.1）

这会产生类似的效果，而不必处理webkit字体渲染的麻烦。 字体呈现统一的解决方案会更好，但是我从来没有遇到过这样的解决方案

<div class="ta-navbar-collapse" ng-class="{'toggled': toggled}">
  <ul class="nav navbar-nav">
      <li>
          <a href="/home">AY KALAM</a>
      </li>
      <li>
          <a href="/home">AY KALAM</a>
      </li>
      <li>
          <a href="/home">AY KALAM</a>
      </li>
      <li>
          <a href="/home">AY KALAM</a>
      </li>
  </ul>
</div>

.ta-navbar-collapse {
  &>ul>li {
      margin-bottom: 10px;
      &:last-child {
          margin-bottom: 0;
      }
      &>a {
        transition: all 0.2s ease-in-out;
        **transform: scale(1);**
        -webkit-transform: translateZ(0px);
          color: $primary-color;
          &:active,
          &:focus,
          &:hover {
              background-color: inherit !important;
              outline: $hiddenOutline;
          }
          &:hover {
              **transform: scale(1.1);**
          }
      }
  }
}