Блог

Главная - Вопросы по программированию - шрифт искажается при изменении его размера с помощью анимации

шрифт искажается при изменении его размера с помощью анимации

#html #css #animation #fonts

#HTML #css #Анимация #шрифты

Вопрос:

Я изменяю размер div (включая вложенные разделы и другие элементы), когда пользователь наводит на него курсор. Я заметил, что при этом шрифт искажается. Этого не происходит на Mac, но это происходит на компьютерах с Windows. Это код для анимации наведения и соответствующего 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>

В чем может быть проблема?

Комментарии:

1. Пожалуйста, отправьте jsfiddle, который воспроизводит вашу проблему. Кроме того, это происходит только в определенном браузере или во всех браузерах. На Mac вы проверяли его во всех браузерах (я предполагаю, что вы можете использовать Safari)

Ответ №1:

Эта проблема очень хорошо объяснена Золтаном в этом сообщении в блоге. Эта проблема возникает из-за свойства CSS transfrom, из-за которого текст отображается с неровными краями, как показано на рисунке ниже.

Неровные края из-за свойства transform

(Это изображение взято из блога Золтана)

Этот эффект более заметен в Windows и едва заметен в Mac.

Решение

Существуют различные решения этой проблемы, однако я предпочитаю добавлять преспективу в свойство 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-фильтра и свойства 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 второе решение работает отлично.

Я надеюсь, что это решит вашу проблему.

Метки: