你如何设置 requirejs 和 Google Web Fonts？答案

【问题标题】：How do you set up requirejs and Google Web Fonts?你如何设置 requirejs 和 Google Web Fonts？
【发布时间】：2016-06-09 01:27:40
【问题描述】：

我正在使用 requirejs-plugins 并尝试将一些 google 网络字体加载到我的脚本中以供使用。我发现几个示例或多或少地模仿了该 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 行

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

【问题讨论】：

标签： javascript requirejs google-font-api google-webfonts

【解决方案1】：

经过一番调查，我发现实际上已经在https://github.com/millermedeiros/requirejs-plugins/issues/71 列出了一个由于代码更改而导致的错误。该错误已于 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”是被投诉的那个。

【讨论】：