Question

我正在尝试使用Modernizr（YepNope）加载动态生成的Google字体样式表，但始终会收到此错误：

Uncaught SyntaxError：意外的标记ILLEGAL（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文件。“

任何人都取得了类似的成功吗？谢谢！

Answer 1

确保将css前缀文件添加到yepnope的副本中。它就像一个jQuery插件。

您可以在以下网址获取：

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

Answer 2

或者，您可以调用Google Webfont API，例如：

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 fallback来使用定时函数或其他函数从服务器加载字体，例如：

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

使用YepNope / Modernizr加载外部Google Fonts样式表

2 个答案: