Question

当用户将鼠标悬停在div上时，我会更改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添加到transfrom属性。

@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机器中，第二个解决方案正常运行。

我希望能解决你的问题。

使用动画调整大小时，字体会失真

1 个答案: