如何在Material UI的webpack构建中包含Roboto字体? [英] How to include Roboto font in webpack build for Material UI?
问题描述
对于基于材料UI 的渐进式 Web应用程序(反应)并使用 Webpack 构建，如何正确包含Roboto字体，以使该应用程序不依赖于Google服务器，并且字体也可以 offline 正常工作?
For a progressive web app based on Material UI (React) and built with Webpack, how do I properly include Roboto font(s) so that the app does not depend on Google servers and fonts also work offline ?
-
安装页面仅引用了 Google字体页面，但这显然会强制从Google服务器下载字体.
The installation page just references the Google fonts page, but that obviously forces fonts to be downloaded from Google servers.
关于Roboto字体，存在类似的材料UI问题，但是仍然依靠Google提供字体文件.
A similar Material UI Issue exists regarding Roboto font, but still relies on Google providing the font files.
我找到了一个提供Roboto字体文件的 NPM软件包，但是我由于提供了许多样式和字体格式，因此不确定如何包括这些文件，并且我不知道Material UI真正需要的样式.另外，仅通过@import导入这些字体系列似乎有性能问题.
I found a NPM package providing the Roboto font files, but I'm not sure how to include those files as lots of styles and font formats are provided and I don't know what styles Material UI really needs. Also, importing those font families simply via @import seems to have performance issues.
那么，将 right Roboto文件与我的应用程序捆绑在一起的一种好又简单的解决方案是什么?
So, what is a good and simple solution to bundle the right Roboto files with my application?
推荐答案
这就是我的团队如何在我们的Webpack项目中加入Roboto字体的原因:
This is how my team went about including the Roboto fonts in our Webpack project:
- 创建文件夹(
/fonts). - 从 Font Squirrel 下载所有Roboto字体并将其移至
/fonts. /li> - 创建CSS文件(
/fonts/index.css).我们从本教程中获取了此文件的内容. >
- Create a folder (
/fonts). - Download all of the Roboto fonts from Font Squirrel and move them into
/fonts. - Create the CSS file (
/fonts/index.css). We got the contents for this file from this tutorial.
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;
}
使用文件加载器Webpack模块加载字体文件，以便Webpack可以识别它们
-
npm install --save file-loader( https://www.npmjs.com/package/file-loader ) - 在您的webpack配置中，使用加载器，如下所示:
npm install --save file-loader(https://www.npmjs.com/package/file-loader)- In your webpack config, use the loader like so:
Use the file-loader webpack module to load in the font files so webpack can recognize them
webpack.conf.js:
loaders: [
..., {
test: /\.(woff|woff2|eot|ttf|svg)$/,
loader: 'file?name=fonts/[name].[ext]'
}
]
在应用程序的主条目中导入字体css文件
App.js:
import './fonts/index.css';
就是这样.您的应用程序的默认字体现在应为Roboto.
And that's it. Your application's default font should now be Roboto.
这个问题的一部分是确定要包含在项目中的 right Roboto字体，因为整个Roboto字体几乎都为5MB.
Part of this question is determining the right Roboto fonts to include in the project since the entirety of the Roboto fonts is almost 5MB.
在自述文件中，包含Roboto的说明指向: fonts.google.com/?selection.family=Roboto:300,400,500 .在这里，300 = Roboto-Light，400 = Roboto-Regular和500 = Roboto-Medium.这些对应于印刷术中定义的字体权重. js文件.尽管这三种字体权重几乎涵盖了整个库的用法，但
In the README, the instructions for including Roboto point to: fonts.google.com/?selection.family=Roboto:300,400,500. Here, 300 = Roboto-Light, 400 = Roboto-Regular, and 500 = Roboto-Medium. These correspond to the font weights defined in the typography.js file. While these three font weights account for usage in almost the entirety of the library, there is one reference to Regular-Bold in DateDisplay.js. If you are not using the DatePicker, you should probably be safe to omit that. Italics font styling is not used anywhere in the project aside from the GitHub markdown styling.
此信息在撰写本文时是准确的，但将来可能会更改.
This information is accurate at the time of this writing, but it may change in the future.
这篇关于如何在Material UI的webpack构建中包含Roboto字体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
