将字体导入 React 应用程序

Question

我正在尝试在我的应用程序中使用 Roboto 字体并且遇到了困难..

我做了npm install --save typeface-roboto并添加import 'typeface-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

您只需 require('typeface-roboto') 即可。

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

class Example extends React.Component {

  render() {

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

    return (
      <div style={styles.root}>
        <p>
          This is now Roboto
        </p>
      </div>
    )
  }
}

// or here instead if you fancy
    .root {
        font-family: 'Roboto';
    }