将字体导入到React应用程序中 [英] Import font into React application

问题描述

我正在尝试在我的应用程序中使用Roboto字体，但日子很艰难.

I'm trying to use the Roboto font in my app and having tough time..

我做了 npm install --save typeface-roboto 并在我的React组件中添加了 import'typeface-roboto'.但是仍然无法更改我的字体.

I did npm install --save typeface-roboto and added import 'typeface-roboto' to my React component. But still can't get my font to change.

我正试图这样做:

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文件.

Am I missing something? Looking for a simple way to do this without any external css file..

推荐答案

将此行代码导入到您的主要CSS或CSS中，无论使用哪种用法

import this code of line in your main css or scss whatever use use

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

这将起作用.如果要自定义此字体，请转到Google字体，然后根据需要选择字体样式的字体粗细.在这里我选择了字体粗细400,300和700如果尚未选择字体粗细，则不能使用其他字体粗细

this will work. If you want to customize this then go to the google font and select font style font weight whatever you want. Here i have selected font weight 400,300 and 700 If have not selected the font weight then you can not use other font weight

这篇关于将字体导入到React应用程序中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！