javascript – 如何在Gatsby中使用Webfont Loader？

2019-06-07 17:19:42 阅读：243 来源： 互联网

我想使用Webfont Loader管理自定义字体的加载,并加载一些谷歌字体.但是,我不确定如何将它与Gatsby整合.我找到了React wrapper for Webfont Loader,但是它希望你像这样使用它：

<WebfontLoader config={config} onStatus={callback}>
  <App />
</WebfontLoader>

在我看来,与盖茨比并不相容.有没有办法对它进行调整,以便与Gatbsy合作？还是一种让unwrapped npm webfontloader module适应盖茨比的方法？

解决方法:

看看这些人是如何做到的：https://github.com/smartive/smartive.ch/blob/master/src/layouts/index.js

这个例子仍然比我的知识稍微高一点,所以我尝试了一种更简单的方法,它对我来说效果很好(虽然可能不是“最干净”的方法等)

在我的layouts / index.js我导入：

import './main.js'

我有以下内容：

if (typeof window !== `undefined`) {

window.onload=function(){

  var WebFont = require('webfontloader');

  WebFont = {
      typekit: { id: 'psj0mst' }
   };

   (function(d) {
      var wf = d.createElement('script'), s = d.scripts[0];
      wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
      wf.async = true;
      s.parentNode.insertBefore(wf, s);
   })(document);

}
}

我不得不添加窗口检查,否则在构建gatsby网站进行生产时出现错误.

标签：javascript,reactjs,gatsby
来源： https://codeday.me/bug/20190607/1195284.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 如何在Gatsby中使用Webfont Loader？