javascript - 你如何设置 requirejs 和谷歌网络字体？

Question

我正在使用 requirejs-plugins并尝试将一些谷歌网络字体加载到我的脚本中以供使用。我发现了几个或多或少模仿该 github 页面上示例的示例。

示例:Loading Google Web Fonts using require.js font plugin

我也阅读了字体插件的源代码，并在我的示例中尝试了这个，但它仍然不起作用。

Line 28:
example: font!google,families:[Tangerine,Cantarell,Yanone Kaffeesatz:700]

到目前为止，这是我的代码。

requirejs.config({
    font: '../bower_components/requirejs-plugins/src/font',
    propertyParser: '../bower_components/requirejs-plugins/src/propertyParser'
});

define(['font!google,families:[Yanone Kaffeesatz:700]'], function(Font) {
    console.log(Font);
});

这是加载时在控制台中引发的错误。

Uncaught ReferenceError: WebFont is not defined

这发生在 font.js 的第 38 行

这里发生了什么？我觉得我缺少某种配置或其他东西。如您所见，我正在使用脚本建议的确切示例导入。有没有实际使用过的例子？

Answer 1

经过一些调查，我发现实际上已经在 https://github.com/millermedeiros/requirejs-plugins/issues/71 列出了一个错误。由于进行了代码更改。该 bug 是 16 天前列出的，至今仍未解决，这对您没有帮助。在此期间，您应该能够对您的插件版本进行以下更改，这应该会束缚您，直到将修复推送到官方 Bower 存储库。

在 bower_components/requirejs-plugins/src/font.js 的第 37 行将其更改为:

req([(document.location.protocol === 'https:'? 'https' : 'http') +'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'], function(){

到:

req([(document.location.protocol === 'https:'? 'https' : 'http') +'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'], function(WebFont){

那个“WebFont”是被提示的那个。