如何在Web UI中为“材质”UI添加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标记样式外.

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