html - 使用动画调整大小时字体变形

Question

当用户将鼠标悬停在 div 上时，我会更改它的大小(包括子 div 和其他元素)。我注意到这样做时字体会变形。这不会发生在 Mac 上，但会发生在 Windows 机器上。这是悬停动画和 coresponidng HTML 的代码(我删掉了不相关的部分):

   CSS: @import url(https://fonts.googleapis.com/css?family=Lato:400,700);

    .content-no-btn { transition: all .2s ease-in-out; }

    .content-no-btn:hover{ transform: scale(1.05); }

HTML:
  <div class="plan">
    <div class="plan-inner">
        <div class="content-no-btn">

          <div class="entry-title first-entry-title">
            <h3>H3 here </h3>
            <div class="price">$23.99<span></span>
            </div>
          </div>
        </div>
        </div>
      </div>

可能是什么问题？

Answer 1

Zoltan 在 this 中很好地解释了这个问题博文 此问题是由于 CSS transfrom 属性引起的，因为该属性呈现的文本带有锯齿状边缘，如下图所示。

(此图摘自Zoltan博客)

这种效果在 Windows 中更为明显，而在 Mac 中几乎不明显。

解决方案

这个问题有多种解决方案，但我更喜欢添加 prespective转移属性(property)。

@import url(https://fonts.googleapis.com/css?family=Lato:400,700);

    .content-no-btn { transition: all .2s ease-in-out; }

    .content-no-btn:hover{ 
      transform: perspective(1px) scale(1.1);
      transform-origin: 0 0;
    }

<div class="plan">
    <div class="plan-inner">
        <div class="content-no-btn">

          <div class="entry-title first-entry-title">
            <h3>H3 here </h3>
            <div class="price">$23.99<span></span>
            </div>
          </div>
        </div>
        </div>
      </div>

另一种解决方案是使用 SVG filter和 backface-visibility属性

@import url(https://fonts.googleapis.com/css?family=Lato:400,700);

    .content-no-btn { transition: all .2s ease-in-out; }

    .content-no-btn:hover{ 
      transform: scale(1.1);
      transform-origin: 0 0;
       /*For chrome or other WebKit/Blink browsers.*/
      -webkit-backface-visibility: hidden;

      /*For Firefox */
      filter: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="gaussian_blur"><feGaussianBlur in="SourceGraphic" stdDeviation="0" /></filter></defs></svg>#gaussian_blur');

    }

<div class="plan">
    <div class="plan-inner">
        <div class="content-no-btn">

          <div class="entry-title first-entry-title">
            <h3>H3 here </h3>
            <div class="price">$23.99<span></span>
            </div>
          </div>
        </div>
        </div>
      </div>

在我的 Linux 机器上，第二种解决方案运行良好。

希望这能解决您的问题。