Как загрузить большое количество веб-шрифтов Google?

Есть ли лучший способ загрузить большое количество веб-шрифтов Google на одну страницу?

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

Я не могу не думать, что есть лучший способ загрузки нескольких шрифтов. После размещения 2 или 3 в «Коллекции шрифтов» Google загрузка страницы, по-видимому, довольно высока.

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

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


css webfonts google-webfonts font-face
person davecave    schedule 09.02.2012    source источник
comment
Я думал, что первые шрифты, видимые над сгибом страницы, будут загружаться первыми, а затем те, которые не видны дальше вниз по странице, будут загружаться позже.   -  person davecave    schedule 27.02.2012
comment
Пожалуйста, взгляните на ответ ниже. Посмотрите, если это то, что вы хотели. :D   -  person Derek 朕會功夫    schedule 28.02.2012

Ответы (1)


arrow_upward
2
arrow_downward

Я не знаю, сработает ли это для вас, но Google Web Fonts предоставляет метод JavaScript, который вы можете указать, когда использовать шрифт. (Может быть, загрузить шрифты после загрузки страницы?)

Попробуйте живую демонстрацию.

Пример (используется шрифт Glass Antiqua):

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Glass+Antiqua::latin' ] }
  };
  var YOURFUNCTION = function() {
    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);
  };

  //Maybe 10 seconds later?
  setTimeout(YOURFUNCTION, 10000);

  //Document Ready?
  $("body").ready(YOURFUNCTION);
</script>

Демонстрация: http://jsfiddle.net/DerekL/bkV7E/

person Derek 朕會功夫    schedule 28.02.2012
comment
Здорово! Итак, прямо сейчас вы настроили его как временную задержку. Как бы это работало, если бы я хотел отображать шрифты после их полной загрузки? - person davecave; 28.02.2012
comment
@davecave, он будет использовать шрифт автоматически, когда завершит загрузку. - person Derek 朕會功夫; 02.03.2012