如何在Material UI的webpack构建中包括Roboto字体?

对于基于Material UI(React)并使用Webpack构建渐进式 Web应用程序,如何正确包含Roboto字体,以使该应用程序不依赖于Google服务器,并且字体也可以脱机工作

  • 安装页面只是引用了谷歌的字体页面,但明显力量的字体从谷歌服务器上下载。

  • 关于Roboto字体,存在类似的Material UI问题,但仍然依靠Google提供字体文件。

  • 我找到了一个提供Roboto字体文件NPM软件包,但是由于提供了许多样式和字体格式,我不知道如何包括这些文件,而且我不知道Material UI真正需要哪些样式另外,仅通过@import导入这些字体系列似乎存在性能问题

那么,将正确的 Roboto文件与我的应用程序捆绑在一起的好又简单的解决方案是什么?

番长2020/03/24 15:41:31

我尝试用npm安装typeface-roboto,但没有用。另外,使用材料ui中的CDN无效。但是,使用npm安装webfontloader是可行的。这是解决方案,首先,

npm install webfontloader --save

然后,从entry.js文件中的webfontloader导入WebFont,例如App.js或index.js

import WebFont from "webfontloader";
WebFont.load({google: {families: ["Roboto:300,400,500"]}});