html - 如何防止 Webkit 文本渲染在 CSS 比例转换期间发生变化

Question

如何防止文本粗细形式在转换期间和转换后变为粗体？在将鼠标悬停在任何元素上之前，文本都很好。 将鼠标悬停在元素上后，它会放大，但会变为粗体，因此在缩小后(应该回到原始状态)，它仍然是粗体。

HTML

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

SCSS

.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);**
          }
      }
  }
}

之前尝试过的解决方案(不起作用):

• 使用 CSS backface-visibility 属性来解决这个问题。引用这个link
• 使用-webkit-transform:translateZ(0px);
• 在正文上使用以下样式
  • 计数器重置:元素；
  • 文本渲染:geometricPrecision；
  • webkit-font-smoothing:抗锯齿；
  • moz-osx-font-smoothing:灰度；

与我获得这些解决方案的问题略有相关: How to prevent text style defaults during CSS transition

Answer 1

我当前使用的解决方法是:

替换:变换:缩放(1.1)

使用:变换:透视(1px)比例(1.1)

这会产生类似的效果，而无需处理 webkit 字体渲染的麻烦。 字体渲染统一解决方案会更好，但我还没有偶然发现任何适用于这种情况的东西。