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

概述对于基于 Material UI(React)并使用Webpack构建的渐进式Web应用程序,如何正确地包含Roboto字体,以便该应用程序不依赖于Google服务器和字体也可脱机工作？ > installation page只是参考Google fonts page,但这显然会强制从Google服务器下载字体. >类似的Material UI Issue存在关于Roboto字体,但仍然依赖于Go 对于基于 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标记样式外.

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

总结

以上是内存溢出为你收集整理的如何在Web UI中为“材质”UI添加Roboto字体？全部内容，希望文章能够帮你解决如何在Web UI中为“材质”UI添加Roboto字体？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。