Вернуться к неустановленному тексту, когда веб-шрифты загружаются медленно - PullRequest
Новая
       102

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

12 голосов
/ 05 декабря 2011

Я использую веб-шрифты Google, например: 

@font-face {
  font-family: "Vollkorn";
  font-style: normal;
  font-weight: normal;
  src: local('Vollkorn Regular'), local('Vollkorn-Regular'), url('http://themes.googleusercontent.com/static/fonts/vollkorn/v2/BCFBp4rt5gxxFrX6F12DKnYhjbSpvc47ee6xR_80Hnw.woff') format('woff');
}
body {
    font-family: "Vollkorn", Georgia, Times, serif;
}

Работая в Chrome, нет «вспышки нестандартного текста» (как описано в этом блоге Typekit ).Вместо этого текст не загружается вообще, пока веб-шрифт не закончил загрузку.

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

Есть ли сначала умный способ показать текст в Грузии, а затем добавить шрифт Vollkorn после загрузки ресурса?

Полагаю, я бы сказал, чтона самом деле очень похожа на «флэш-стиль», а не на пустую страницу, и хотела бы применить это поведение.

Ответы [ 2 ]

3 голосов
/ 06 декабря 2011

Вам следует обратиться к загрузчику веб-шрифтов, который Google совместно разработал с несколькими другими службами веб-шрифтов.

http://code.google.com/apis/webfonts/docs/webfont_loader.html

0 голосов
/ 05 декабря 2011

Это можно сделать с помощью JavaScript после загрузки страницы: 

<script>
window.onload = changeFont;

function changeFont() {
   document.getElementsByTagName('body')[0].fontFamily = '"Vollkorn", Georgia, Times, serif';
}
</script>

Затем обновите свой CSS, чтобы удалить «Vollkorn» из списка, установив его в Georgia. В зависимости от того, сколько времени потребуется для загрузки шрифта, вам может потребоваться перенести изменение шрифта в вызов setTimeout.

...