如何在Web UI中为“材质”UI添加Roboto字体？

对于基于 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.

那么,什么是一个好的和简单的解决方案来捆绑正确的Roboto文件与我的应用程序？

解决方法

这是我的团队在我们的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标记样式外.

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

原文地址：https://www.jb51.cc/html/224516.html

如何在Web UI中为“材质”UI添加Roboto字体？

解决方法

相关推荐