这就是我的团队如何将 Roboto 字体包含在我们的 Webpack 项目中：
下载 Roboto 字体并在特定于字体的文件夹中创建 CSS 文件
- 创建一个文件夹（
/fonts).
- 从以下位置下载所有 Roboto 字体松鼠字体 https://www.fontsquirrel.com/fonts/roboto。前往网页字体套件选项卡，然后按下载@font-face套件具有默认设置的按钮。
- 将字体移入
/fonts.
- 创建 CSS 文件（
/fonts/index.css）。我们从以下位置获取了该文件的内容本教程 https://www.maketecheasier.com/use-google-roboto-font-everywhere/.
索引.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;
}
使用文件加载器 webpack 模块加载字体文件，以便 webpack 可以识别它们
-
npm install --save file-loader (https://www.npmjs.com/package/file-loader https://www.npmjs.com/package/file-loader)
- 在你的 webpack 配置中，像这样使用加载器：
webpack.config.js：
loaders: [
..., {
test: /\.(woff|woff2|eot|ttf|svg)$/,
loader: 'file-loader',
options: { name: '[name].[ext]', outputPath: 'fonts/', }
},
...
]
在应用程序主入口导入字体css文件
App.js:
import './fonts/index.css';
就是这样。您的应用程序的默认字体现在应该是 Roboto。
编辑：Material-UI 实际上使用哪种 Roboto 字体？
这个问题的一部分是确定rightRoboto 字体包含在项目中，因为整个 Roboto 字体几乎有 5MB。
In the README https://github.com/callemall/material-ui#roboto-font，包含 Roboto 的说明指向：fonts.google.com/?selection.family=Roboto:300,400,500 https://fonts.google.com/?selection.family=Roboto:300,400,500。此处，300 = Roboto-Light，400 = Roboto-Regular，500 = Roboto-Medium。这些对应于中定义的字体粗细Typography.js 文件 https://github.com/callemall/material-ui/blob/master/src/styles/typography.js#L26。虽然这三种字体粗细几乎在整个库中都有使用，但在日期显示.js https://github.com/callemall/material-ui/blob/master/src/DatePicker/DateDisplay.js#L15。如果您不使用 DatePicker，则可以安全地忽略它。除了 GitHub markdown 样式之外，项目中的任何地方都没有使用斜体字体样式。
此信息在撰写本文时是准确的，但将来可能会发生变化。
