Question

给出以下反应代码：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import 'typeface-roboto';
import Typography from '@material-ui/core/Typography';

const App = class extends Component {
  render() {
    return <Typography variant="h1">Hello React App!</Typography>;
  }
}

const root = document.getElementById('root');

ReactDOM.render(<App />, root);

如果我评论import 'typeface-roboto';，则我的应用程序没有任何变化。

有人可以向我解释原因吗？

沙盒：https://codesandbox.io/s/x2n59kj2lq

Answer 1

软件包'typeface-roboto'用于导入roboto字体，它包括所有必需的字体文件和CSS文件。仅当您要更改字体时才需要。而且，typeface-roboto假定您使用webpack来处理CSS和文件。

Answer 2

MUI Typography组件将字体系列设置为

font-family: "Roboto", "Helvetica", "Arial", sans-serif;

当您导入typeface-roboto时，您将使“ Roboto”可用于该应用程序，并且CSS和字体文件与您的应用程序捆绑在一起。

如果您注释掉import 'typeface-roboto';，则“ Roboto”字体将不再捆绑并在您的应用中可用。

在您提供的代码和框中，您可以检查h1标题并查看font-family: Roboto,Helvetica Neue,Arial,sans-serif;

要注意的重要一点是，Helvetica Neue下方有一个非常模糊的下划线，这意味着Roboto字体不可用，因此正在使用Helvetica Neue。

如果导入Roboto，您将看到Roboto现在带有下划线。

当您注释掉import 'typeface-roboto';时，看起来您的应用程序中的所有内容都是相同的，但这是因为字体堆栈中的后备字体与Roboto非常相似。

Material-ui并未像他们在文档中所说的那样加载Roboto，只有导入语句才可以使用它，但是除非您敏锐的眼神或看到字体库中带下划线的字体，否则您可能会认为您在看Roboto实际上是它的Helvetica。

Answer 3

不要忘记，这种导入模块类型意味着仅在es6中导入脚本，因此在这种情况下是字体的css脚本

字体roboto是什么？

3 个答案: