Question

我很擅长在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'));
  ]
});

提前致谢

Answer 1

我希望你已经弄明白了，但万一你还没有：

您正在尝试将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 repo here中找到它）。然后你可以这样做：

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 ......“如果在安全的域名上。

是的nope有条件地加载谷歌网络字体

1 个答案: