@font-face Текст невидим в Chrome при обновлении... но не всегда?

Мой сайт WordPress находится здесь: http://pangalactic.co/

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

@font-face {
font-family: 'BebasNeueRegular';
src: url("fonts/bebas-neue/BebasNeue-webfont.eot");
src: url("fonts/bebas-neue/BebasNeue.otf");
src: url("fonts/bebas-neue/BebasNeue-webfont.eot?#iefix") format("embedded-opentype"),     url("fonts/bebas-neue/BebasNeue-webfont.woff") format("woff"), url("fonts/bebas-    neue/BebasNeue-webfont.ttf") format("truetype"), url("fonts/bebas-neue/BebasNeue-    webfont.svg#BebasNeueRegular") format("svg");
font-weight: normal;
font-style: normal; 
}

Ответ 1

Используя следующий хак, предложенный в сообщении об ошибке Paul Irish, связанном с, работал у меня:

.classes-affected-by-issue
{
    -webkit-animation-duration: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0.1s;
}

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

Это заставляет Chrome перерисовывать шрифт, который, как представляется, устраняет проблему.

Следите за сообщением об ошибке, чтобы увидеть, когда вы можете удалить этот код с ваших производственных серверов.

Эта проблема закрыта по состоянию на 35.0.1867.2 канарейки. Но сохраните код, пока ваши клиенты не будут обновлены до этой версии.

Ответ 2

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

Взлом, который заставил его работать для меня, это:

$(document).ready(function(e) {
    setTimeout(function() {
        $('body').width($('body').width()+1).width('auto');
    }, 500);
});

Это заставит тело изменять размер, чтобы шрифты были перерисованы. Это предполагает, что вы используете jQuery, а ширина css для тела должна быть "авто". Это приведет к короткому миганию на странице при возникновении проблемы с шрифтом, но по крайней мере после этого будут отображаться шрифты.

Надеюсь, это будет исправлено в версии 35.