使用 YepNope/Modernizr 加载外部 Google 字体样式表答案

【问题标题】：Load external Google Fonts stylesheet with YepNope/Modernizr使用 YepNope/Modernizr 加载外部 Google 字体样式表
【发布时间】：2011-10-06 04:28:33
【问题描述】：

我正在尝试使用 Modernizr (YepNope) 加载动态生成的 Google 字体样式表，但总是收到此错误：

Uncaught SyntaxError: Unexpected token 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 文件。”

有人成功实现了类似的目标吗？谢谢！

【问题讨论】：

标签： javascript css asynchronous modernizr yepnope

【解决方案1】：

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

你可以在：

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

【讨论】：

非常感谢您的澄清！顺便说一句，装载机做得很好=）
有没有办法将这些插件（前缀 + css 等待）集成到 Modernizr 构建中？
如果您只是将它们附加到modernizr 文件的末尾，它们会像魅力一样工作。（对于“魅力”的一些定义）

【解决方案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 后备来使用定时函数或其他函数从服务器加载字体，例如：

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

【讨论】：