如何在材料UI的webpack构建中包含Roboto字体？

Question

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

• 在安装页面只是引用了谷歌网页的字体,但显然迫使字体,从谷歌服务器上下载.

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

• 我发现了一个提供Roboto字体文件的NPM包,但是我不知道如何提供这些文件,因为提供了很多样式和字体格式,我不知道Material UI真正需要什么样的样式.此外,仅通过@import导入这些字体系列似乎存在性能问题.

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

Answer 1

这就是我的团队在Webpack项目中包含Roboto字体的方法:

下载Roboto字体并在特定于字体的文件夹中创建CSS文件

• 创建一个文件夹(/fonts).
• 从Font Squirrel下载所有Roboto字体并将其移入/fonts.
• 创建CSS文件(/fonts/index.css).我们从本教程获得了此文件的内容.

index.css:

* {
  font-family: Roboto, sans-serif;  
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Regular-webfont.eot');
    src: url('Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Regular-webfont.woff') format('woff'),
         url('Roboto-Regular-webfont.ttf') format('truetype'),
         url('Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Italic-webfont.eot');
    src: url('Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Italic-webfont.woff') format('woff'),
         url('Roboto-Italic-webfont.ttf') format('truetype'),
         url('Roboto-Italic-webfont.svg#RobotoItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Bold-webfont.eot');
    src: url('Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Bold-webfont.woff') format('woff'),
         url('Roboto-Bold-webfont.ttf') format('truetype'),
         url('Roboto-Bold-webfont.svg#RobotoBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-BoldItalic-webfont.eot');
    src: url('Roboto-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-BoldItalic-webfont.woff') format('woff'),
         url('Roboto-BoldItalic-webfont.ttf') format('truetype'),
         url('Roboto-BoldItalic-webfont.svg#RobotoBoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Thin-webfont.eot');
    src: url('Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Thin-webfont.woff') format('woff'),
         url('Roboto-Thin-webfont.ttf') format('truetype'),
         url('Roboto-Thin-webfont.svg#RobotoThin') format('svg');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-ThinItalic-webfont.eot');
    src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-ThinItalic-webfont.woff') format('woff'),
         url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
         url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License). 
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Light-webfont.eot');
    src: url('Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Light-webfont.woff') format('woff'),
         url('Roboto-Light-webfont.ttf') format('truetype'),
         url('Roboto-Light-webfont.svg#RobotoLight') format('svg');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-LightItalic-webfont.eot');
    src: url('Roboto-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-LightItalic-webfont.woff') format('woff'),
         url('Roboto-LightItalic-webfont.ttf') format('truetype'),
         url('Roboto-LightItalic-webfont.svg#RobotoLightItalic') format('svg');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Medium-webfont.eot');
    src: url('Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Medium-webfont.woff') format('woff'),
         url('Roboto-Medium-webfont.ttf') format('truetype'),
         url('Roboto-Medium-webfont.svg#RobotoMedium') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-MediumItalic-webfont.eot');
    src: url('Roboto-MediumItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-MediumItalic-webfont.woff') format('woff'),
         url('Roboto-MediumItalic-webfont.ttf') format('truetype'),
         url('Roboto-MediumItalic-webfont.svg#RobotoMediumItalic') format('svg');
    font-weight: 300;
    font-style: italic;
}

使用file-loader webpack模块加载字体文件,以便webpack可以识别它们

• npm install --save file-loader(https://www.npmjs.com/package/file-loader)
• 在你的webpack配置中,像这样使用加载器:

webpack.conf.js:

loaders: [
  ..., {
    test: /\.(woff|woff2|eot|ttf|svg)$/,
    loader: 'file?name=fonts/[name].[ext]'
  }
]

在应用程序的主条目中导入字体css文件

App.js:

import './fonts/index.css';

就是这样.您的应用程序的默认字体现在应该是Roboto.

编辑:Material-UI实际使用哪种Roboto字体？

这个问题的一部分是确定要包含在项目中的正确的 Roboto字体,因为整个Roboto字体几乎是5MB.

在自述文件中,包含Roboto的说明指向:fonts.google.com/？select.family = Roboto:300,400,500.这里,300 = Roboto-Light,400 = Roboto-Regular,500 = Roboto-Medium.这些对应于typography.js文件中定义的字体权重.虽然这三个字体权重在几乎整个库中占用,但在DateDisplay.js中有一个对Regular-Bold的引用.如果您没有使用DatePicker,那么您应该可以安全地省略它.除了GitHub降价样式之外,项目中的任何地方都不使用斜体字体样式.

此信息在撰写本文时是准确的,但将来可能会发生变化.

Answer 2

您也可以像本期中记录的那样执行此操作:https: //github.com/callemall/material-ui/issues/6256

npm install typeface-roboto --save

然后,在index.js中:

import 'typeface-roboto'

适用于webpack/create-react-app.

Answer 3

我尝试使用 npm 安装 typeface-roboto 但它不起作用。另外，使用 Material 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"]}});

Answer 4

这是根据MUI 文档；我做到了，而且效果非常好。

使用npm安装：

npm install @fontsource/roboto

...或使用纱线：

yarn add @fontsource/roboto

然后，将这些导入包含在您应用程序的入口点，例如index.tsx：

import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

有关更多信息，请阅读文档

Answer 5

如果您确实使用 Angular，但它import 'typeface-roboto'并不理想且不简单，您的做法可能与此处建议的有所不同。

首先，按照其他人的描述安装这个不错的 npm 包：

npm install typeface-roboto --save

然后只需将其添加到您的angular.json：

"styles": [
  "node_modules/typeface-roboto/index.css",
  [...],
  "src/styles.css"
],