0

我对在 Modernzr 中使用 Yep Nope 完全陌生，并且遇到了一些困难。

我想知道我执行以下操作的语法是什么：

  • 使用 yep nope 检查 webfont 支持
  • 如果是这样，请将 url 字符串附加到文档的头部以加载远程 css 文件。

类似的东西不起作用 - 还是我在这里吠错了树？

yepnope({
  test : Modernizr.fontface
  yep : [
       $('<link href=\'http://fonts.googleapis.com/css?family=Bitter:400,700|Oswald:300,400,700\' rel=\'stylesheet\' type=\'text/css\'>').appendTo($('head'));
  ]
});

提前致谢

4

1 回答 1

4

我希望你已经弄清楚了，但如果你还没有：

您正在尝试将 JS 语句作为数组中的项目运行。这在我所知道的任何 JS 上下文中都不起作用。我尝试的第一步是删除 jQuery 调用，并指定 CSS 的原始 URL，如下所示：

yepnope({
    test: Modernizr.fontface,
    yep: [
      'http://fonts.googleapis.com/css?family=Bitter:400,700|Oswald:300,400,700'
    ]
});

这会加载样式表，但会引发错误，因为 YepNope 认为它是一个 JS 文件。解决此问题的方法是包含 YepNope CSS 前缀插件（您可以在此处的 Github 存储库中找到它）。然后你可以这样做：

yepnope({
    test: Modernizr.fontface,
    yep: [
      'css!//fonts.googleapis.com/css?family=Bitter:400,700|Oswald:300,400,700'
    ]
});

我已经测试过了，效果很好。

您还可以将此方法与 Modernizr.load 一起使用（如果您使用的是 Modernizr 的自定义构建）。您所要做的就是在包含 Modernizr 之后包含任何 YepNope 插件。将适当的调用委托给 YepNope 是足够聪明的。

作为旁注，请注意我从第二个代码块中删除了“http:”。这称为“协议相对 URL”。它允许根据您当前的协议进行加载。这意味着如果您在不安全的域中，它将加载“ http ://fonts.googleapis...”，如果在安全域中，它将加载“ https ://fonts.googleapis...”。

于 2013-07-09T19:14:38.680 回答