下载Roboto字体并在特定于字体的文件夹中创建CSS文件

Question

对于基于Material UI（React）并使用 Webpack 构建的渐进式网络应用，如何正确包含Roboto字体以便应用程序不依赖于Google服务器和字体也可以离线？

installation page仅引用Google fonts page，但这显然会强制从Google服务器下载字体。
关于Roboto字体存在类似的Material UI Issue，但仍然依赖Google提供字体文件。
我找到了NPM package providing the Roboto font files，但由于提供了大量的样式和字体格式，我不确定如何包含这些文件，并且我不知道哪些样式材料用户界面确实需要。此外，仅通过@import导入这些字体系列似乎有performance issues。

那么，将正确 Roboto文件与我的应用程序捆绑在一起的优秀而简单的解决方案是什么？

Answer 1

这就是我的团队在Webpack项目中包含Roboto字体的方法：

下载Roboto字体并在特定于字体的文件夹中创建CSS文件

创建一个文件夹（/fonts）。
从Font Squirrel下载所有Roboto字体并将其移至/fonts。
创建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,400,500。这里，300 = Roboto-Light，400 = Roboto-Regular，500 = Roboto-Medium。这些对应于typography.js file中定义的字体权重。虽然这三个字体权重几乎占据了整个库的用法，但在DateDisplay.js中有一个对Regular-Bold的引用。如果您没有使用DatePicker，那么您应该可以安全地省略它。除了GitHub降价样式之外，在项目的任何地方都不使用斜体字体样式。

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

Answer 2

您也可以像本期中记录的那样执行此操作： https://github.com/callemall/material-ui/issues/6256

npm install typeface-roboto --save

然后，在index.js中：

import 'typeface-roboto'

适用于webpack / create-react-app。

Answer 3

我尝试用npm安装typeface-roboto，但是没有用。另外，使用材料ui中的CDN无效。但是，使用npm安装webfontloader是可行的。这是解决方案，首先，

npm install webfontloader --save

然后，从webfontloader中的entry.js文件（例如App.js或index.js）中导入WebFont

import WebFont from "webfontloader";
WebFont.load({google: {families: ["Roboto:300,400,500"]}});

Answer 4

如果应用程序是使用 create-react-app 启动的，则它没有[可见] webpack配置文件。在这种情况下，您可以执行以下操作：

在/ public
创建/public/fonts/fonts.css，定义@font-faces

@font-face { font-family: 'inglobal'; font-weight: normal; font-style: normal; src: url('./OperatorMono.ttf'); }
复制字体文件
添加 <link rel="stylesheet" href="%PUBLIC_URL%/fonts/fonts.css"> 到/public/index.html的
乌拉！

5 / B。如果由于任何原因，它仍然无效，请将字体的扩展名更改为.css（同样在src：url（'。/ OperatorMono.css'））

Answer 5

如果您确实使用Angular，而import 'typeface-roboto'并不理想且不方便，那么您可能会采用与此处建议的稍有不同的方式。

首先，按照其他人的描述安装这个不错的npm软件包：

npm install typeface-roboto --save

然后将其添加到您的angular.json：

"styles": [
  "node_modules/typeface-roboto/index.css",
  [...],
  "src/styles.css"
],

如何在材料UI的webpack构建中包含Roboto字体？

5 个答案:

下载Roboto字体并在特定于字体的文件夹中创建CSS文件

使用文件加载器webpack模块加载字体文件，以便webpack可以识别它们

在应用程序的主条目中导入字体css文件

编辑：Material-UI实际使用哪种Roboto字体？