你如何设置requirejs和Google Web Fonts

How do you set up requirejs and Google Web Fonts?

本文关键字：requirejs Google Web Fonts 设置 何设置      更新时间：2023-09-26

我正在使用requirejs插件，并尝试将一些谷歌网络字体加载到我的脚本中使用。我发现有几个例子或多或少地模仿了那个 github 页面上的例子。

示例：使用 require.js 字体插件加载 Google 网络字体

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

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

这发生在字体的第 38 行.js

这是怎么回事？我觉得我错过了某种配置或其他东西。如您所见，我正在使用脚本建议的确切示例导入。有没有实际使用的例子？

经过一番调查，我发现实际上由于进行了代码更改，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"是被投诉的那个。

相关文章：