Ответ 1

По-видимому, это известная ошибка Chrome. Там используется только обходное решение css, которое должно решить проблему:

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 просто нужно перекрасить текст

Ответ 2

Исправление CSS не работает для меня, также 0,5 секундная задержка script кажется неудобной.

Этот фрагмент JS, похоже, работает для нас:

<script type="text/javascript">
jQuery(function($) {
    if (/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) {
        $('body').css('opacity', '1.0') 
    }
})
</script>

Ответ 3

Если исправление css не работает для вас

В случае, если первый рейтинг сообщения не работает, вот решение:

удалите 'http:' в:

<link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'> 

или

@import url(http://fonts.googleapis.com/css?family=Alfa+Slab+One);

Как объясняется David Bain, большинство современных браузеров фактически не требуют, чтобы вы указали протокол, они будут "выводить" протокол на основе контекста, из которого вы его назвали

Ответ 4

Пробовал исправление css выше, без успеха. Наконец, разрешив создание таблицы стилей (chrome.css), содержащей:

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; }
}

И загрузив его в jquery внизу страницы:

<script type="text/javascript">
   $(document).ready(function () {
      $('head').append('<link href="/chrome.css" rel="stylesheet" />');
   });
</script>

Ответ 5

Я включил вышеприведенный CSS... но я также включил в свой заголовок следующий javascript:

(Заметьте, я знаю, что я не настроил шрифты в коде ниже. Но, несмотря на это, он все еще, кажется, помогает заставить Chrome перерисовывать шрифты на странице... просто убедитесь, что ваши шрифты правильно указаны в другом месте )

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

Надеюсь, это поможет людям. Приветствия.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">

 $(function() { $('body').hide().show(); });
</script>


<script type="text/javascript">

//JavaScript goes here


WebFontConfig = {
  google: { families: ['FontOne', 'FontTwo'] },
    fontinactive: function (fontFamily, fontDescription) {
   //Something went wrong! Let load our local fonts.
    WebFontConfig = {
      custom: { families: ['FontOne', 'FontTwo'],
      urls: ['font-one.css', 'font-two.css']
    }
  };
  loadFonts();
  }
};

function loadFonts() {
  var wf = document.createElement('script');
  wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
    '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
}

(function () {
  //Once document is ready, load the fonts.
  loadFonts();
  })();

</script>

Здесь, где я нашел выше: https://productforums.google.com/forum/#!topic/chrome/tYHSqc-fqso

Ответ 6

Я исправил его с помощью решения JS, но также должен был использовать последний jQuery, размещенный в google (1.11), чтобы зафиксировать его.

Ответ 7

Я столкнулся с той же проблемой. Это было связано с несоответствием протокола HTTP/S, как описано здесь.

Используйте https версию URL.

Ответ 8

Это не реальное решение, но оно работает лучше для меня, чем все остальное в этой теме. Я изменил шрифт. У меня была Фира Санс, и теперь я просто перешел на Roboto, который работает из коробки.

Ответ 9

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

возможно, потому что у вас более старая версия шрифта в вашей системе. я думаю.

Ответ 10

Я пытался работать с Meg-ответом, но, как и многие другие, это тоже не работало для меня.

Для использования Google Font нашла этот трюк [Добавление скриншотов для шагов].

1) Просто возьмите url из css или стандартной ссылки, как выделено.

2) Откройте ссылку на другой вкладке, скопируйте весь код css (т.е. font-face) в ваш файл css и запустите.

Не уверен в производительности, так как многие HTTP-вызовы добавляются или просто пытаются копировать один шрифт.

Изображение для шага 1

Изображение для шага 2

Ответ 11

Возможно, что элемент имеет text-rendering: optimizeLegibility, который может вызвать эту или подобные проблемы. Изменение этого параметра на auto исправило эту проблему для меня проектом Foundation 5, который по умолчанию устанавливает его optimizeLegibility.

Ответ 12

См. подобную проблему в вопросе Странная проблема при показе Google Font Rendering.

Решение заключается в загрузке нужного шрифта (I мой случай "Fira Sans" ) из CDN Mozilla вместо Google CDN.

Ответ 13

Возможно, это не серебряная пуля, но устраните проблему на нашем сайте, переместив ссылку на font-версию css на нижнюю часть наших страниц, а также веб-ссылку, указанную выше.

Ответ 14

Если у людей по-прежнему возникает эта проблема, прежде чем пытаться использовать все замечательные решения, попробуйте использовать важный тэг в своем CSS, чтобы узнать, исправит ли он это, как и для меня, и я не уверен, что ошибка аналогично старой ошибке Chrome.

.faultyText {"Roboto Slab", Georgia, serif !important}

Ответ 15

Плагин Checkout, который я сделал: https://chrome.google.com/webstore/detail/fontfix/ekgfbmjaehhpbakdbpfmlepngjkaalok

Он перестраивает сеть с помощью чистого javascript, что заставляет браузер перерисовывать всю страницу.