对于基于
Material UI(React)并使用Webpack构建的渐进式Web应用程序,如何正确地包含Roboto字体,以便该应用程序不依赖于Google服务器和字体也可脱机工作？
> installation page只是参考Google fonts page,但这显然会强制从Google服务器下载字体.
>类似的Material UI Issue存在关于Roboto字体,但仍然依赖于Google提供的字体文件.
>我发现一个NPM package providing the Roboto font files,但我不知道如何包括这些文件,因为提供了大量的样式和字体格式,我不知道什么样的材质UI真正需要.另外,通过@import简单地导入那些字体,似乎有performance issues.
解决方法
这是我的团队在我们的Webpack项目中包括Roboto字体的方式：
下载Roboto字体,并在一个特定于字体的文件夹中创建一个CSS文件
>创建一个文件夹(/ fonts).
>从Font Squirrel下载所有Roboto字体并将其移动到/字体中.
>创建CSS文件(/fonts/index.css).我们从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配置中,使用这样的加载器：
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.
在README中,包括Roboto指向：fonts.google.com/?selection.family=Roboto:300,500.在这里,300 = Roboto-Light,400 = Roboto-Regular,500 = Roboto-Medium.这些对应于typography.js file中定义的字体权重.虽然这三个字体权重占几乎整个库的使用量,但DateDisplay.js中有一个引用到常规粗体.如果不使用DatePicker,则应该是安全地省略斜体字体样式在项目中的任何地方都不被使用,除了GitHub标记样式外.
此信息在撰写本文时是准确的,但将来可能会发生变化.
