将字体导入React应用程序

Question

我试图在我的应用程序中使用Roboto字体，但遇到了困难..

我完成了npm安装--保存字体roboto，并将导入‘字体roboto'添加到我的React组件中。但仍然无法更改字体。

我试着这样做:

const React = require('react')
import 'typeface-roboto'

class Example extends React.Component {

  render() {

    let styles = {
      root: {
        fontFamily: 'Roboto'
      }
    }

    return (
      <div style={styles.root}>
        <p>
          This text is still not Roboto ?!???!!1
        </p>
      </div>
    )
  }
}
module.exports = Example

我错过了什么吗？正在寻找一种不需要任何外部css文件的简单方法。。

Answer 1

我有同样的问题，无论如何都无法获得我的组件的Roboto字体。

我使用了webfontloader包。

yarn add webfontloader

或

npm install webfontloader --save 

h完成此操作后，将以下代码添加到索引中。js或作为应用程序入口点的js文件

import WebFont from 'webfontloader';

WebFont.load({
  google: {
    families: ['Titillium Web:300,400,700', 'sans-serif']
  }
});
// rest of the index.js code

现在应用字体系列。

Answer 2

导入此行代码 到您的主 css 或 scss 中，无论使用什么用途

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap');

这将起作用。如果要自定义此内容，请转到Google字体并选择字体样式字体粗细。在这里，我选择了字体粗细400，300和700如果没有选择字体粗细，那么你不能使用其他字体粗细

Answer 3

尝试添加import'typeface-robto'；在根文件中，即index.js文件。

在我的例子中，我将字体系列添加到body元素中，并且它是有效的。