Устранение проблем с рендерингом Google в Chrome

нередко сталкивается с трудностями в использовании Google Fonts в веб -разработке. Конкретная проблема, которая в последнее время возникла, влияет на веб -сайты с использованием Roboto Slab в Chrome. В то время как шрифт появляется, как и ожидалось в других браузерах, он остается невидимым при начальной загрузке страницы в Chrome.

. После расследования это, похоже, является известной ошибкой в ​​Chrome. Причина проблемы состоит в том, что хром иногда может правильно отображать пользовательские шрифты во время начальной загрузки страницы. Однако после того, как свойство CSS будет перезагружено (например, путем парящего по стиле ссылку), шрифт становится видимым.

для решения этого, был разработан обходной путь, который опирается исключительно на CSS. Добавив следующий код в свою таблицу стилей, вы можете убедиться, что Chrome выполняет шрифт правильно:

body {
    -webkit-animation-delay: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}

этот обходной путь, по сути, заставляет Chrome перекрасить текст, решение проблемы. Стоит отметить, что это решение только для CSS и может не подходить для всех ситуаций. Тем не менее, он обеспечивает эффективное средство решения проблемы рендеринга Google в Chrome.