Блог

Главная - Вопросы по программированию - Загрузка внешней таблицы стилей Google Fonts с помощью YepNope / Modernizr

Загрузка внешней таблицы стилей Google Fonts с помощью YepNope / Modernizr

#javascript #css #asynchronous #modernizr #yepnope

#javascript #css #асинхронный #modernizr #yepnope

Вопрос:

Я пытаюсь загрузить динамически сгенерированную таблицу стилей шрифтов Google с помощью Modernizr (YepNope), но всегда получаю эту ошибку:

Неперехваченная синтаксическая ошибка: неожиданный недопустимый токен (css: 1)

Моя таблица стилей выглядит следующим образом:

 http://fonts.googleapis.com/css?family=Holtwood One SC

и я вызываю это через

 Modernizr.load({
    load: ['css!http://fonts.googleapis.com/cssfamily=Holtwood One SC|Terminal Dosis:700'],
    callback: 
        function (url, result, key) {
            console.log('loaded...!');          
        }       
});

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

«С помощью css! префикс, вы можете добавить его к любому имени файла, и yepnope будет обрабатывать его как файл css «.

У кого-нибудь был успех в достижении чего-то подобного? Спасибо!

Ответ №1:

Убедитесь, что вы добавляете файл префикса css в свою копию yepnope. Он работает как плагин jQuery.

Вы можете получить его по адресу:

https://github.com/SlexAxton/yepnope.js/blob/master/prefixes/yepnope.css-prefix.js

Комментарии:

1. Большое спасибо за разъяснения! Кстати, отличная работа с загрузчиком =)

2. Есть ли способ интегрировать эти плагины (prefix css wait) в сборку Modernizr?

3. Если вы просто добавите их в конец файла modernizr, они будут работать как шарм. (для некоторого определения «очарования»)

Ответ №2:

Или вы можете вызвать API Google Webfont, например: 

 Modernizr.load({
 load: 'http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js',
 complete: function () {

  WebFont.load({
   google: {
    families: ['Open Sans:300,400,700']
   }
  });
 }
});

В идеале также следует использовать резервный вариант no-js для загрузки шрифтов с вашего сервера с помощью функции синхронизации или другой, например:

 if (!window.jQuery) {
 Modernizr.load('http://d.clickmetrics.cl/assets/js/scaffolding/jquery-1.9.0.min.js');
}