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

webpack Webpack

古一

2020-03-24

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

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

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

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

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

第3455篇《如何在Material UI的webpack构建中包括Roboto字体？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
番长 2020.03.24

我尝试用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"]}});

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android