对于基于Material UI (React) 并使用Webpack构建的渐进式Web 应用程序，我如何正确包含 Roboto 字体，以便该应用程序不依赖于 Google 服务器并且字体也可以离线工作？
安装页面仅引用Google 字体页面，但这显然会强制从 Google 服务器下载字体。
Roboto 字体存在类似的Material UI 问题，但仍依赖 Google 提供字体文件。
我找到了一个提供 Roboto 字体文件的 NPM 包，但我不确定如何包含这些文件，因为提供了很多样式和字体格式，而且我不知道 Material UI 真正需要什么样式。此外，仅通过 @import 导入这些字体系列似乎存在性能问题。
那么，将正确的Roboto 文件与我的应用程序捆绑在一起的好且简单的解决方案是什么？
您也可以像此问题中记录的那样进行操作： https ://github.com/callemall/material-ui/issues/6256
npm install typeface-roboto --save
然后，在您的 index.js 中：
import 'typeface-roboto'
适用于 webpack/create-react-app。
这就是我的团队在我们的 Webpack 项目中包含 Roboto 字体的方式：
/fonts)。/fonts./fonts/index.css)。我们从本教程中获得了该文件的内容。索引.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;
}
npm install --save file-loader（https://www.npmjs.com/package/file-loader）webpack.conf.js：
loaders: [
..., {
test: /\.(woff|woff2|eot|ttf|svg)$/,
loader: 'file-loader',
options: { name: '[name].[ext]', outputPath: 'fonts/', }
},
...
]
应用程序.js：
import './fonts/index.css';
就是这样。您的应用程序的默认字体现在应该是 Roboto。
这个问题的一部分是确定要包含在项目中的正确Roboto 字体，因为整个 Roboto 字体几乎是 5MB。
在README中，包含 Roboto 的说明指向：fonts.google.com/ ?selection.family=Roboto:300,400,500 。在这里，300 = Roboto-Light，400 = Roboto-Regular，500 = Roboto-Medium。这些对应于typography.js 文件中定义的字体粗细。虽然这三种字体粗细几乎占整个库的使用情况，但在DateDisplay.js中有一个对 Regular-Bold 的引用。如果你不使用 DatePicker，你应该可以安全地忽略它。除了 GitHub markdown 样式外，项目中的任何地方都没有使用斜体字体样式。
此信息在撰写本文时是准确的，但将来可能会发生变化。
我尝试使用 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"]}});
如果您确实使用了 Angular，而import 'typeface-roboto'这并不理想和容易，您可能会做的与这里建议的有所不同。
首先，按照其他人的描述安装这个不错的 npm 包：
npm install typeface-roboto --save
然后只需将其添加到您的angular.json：
"styles": [
"node_modules/typeface-roboto/index.css",
[...],
"src/styles.css"
],
对于简洁的 Material-UI / Create React App PWA，不需要所有变体 - 您只需要：
yarn add @fontsource/roboto
index.js
import "@fontsource/roboto/latin-400.css";
import "@fontsource/roboto/latin-500.css";
theme.js（可选，但使它看起来清晰干净）
overrides: {
MuiCssBaseline: {
html: {
"-webkit-font-smoothing": "antialiased",
"-moz-osx-font-smoothing": "grayscale",
height: "100%",
width: "100%"
}
}
}
您的字体将被捆绑并立即在线/离线使用
如果应用程序是使用create-react-app启动的，它没有 [可见] webpack 配置文件。在这种情况下，您可以执行以下操作：
创建 /public/fonts/fonts.css，定义@font-faces
@font-face {
font-family: 'inglobal';
font-weight: normal;
font-style: normal;
src: url('./OperatorMono.ttf');
}
复制字体文件
添加
<link rel="stylesheet" href="%PUBLIC_URL%/fonts/fonts.css">
到 /public/index.html 的
欢呼！
5/b。如果由于某种原因它仍然不起作用，请将字体的扩展名更改为 .css（也在 src: url('./OperatorMono.css') ）