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

尝试在根文件（即index.js文件）中添加import 'typeface-roboto';。

就我而言，我在body元素中添加了font-family，并且可以正常工作。

Answer 2

您只需要（'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';
    }

Answer 3

我遇到了同样的问题，无法为我的组件获取Roboto字体。

我使用了webfontloader程序包。

yarn add webfontloader

或

npm install webfontloader --save

h 完成此操作后，将以下代码添加到您的 index.js 或JS文件中，该文件是您应用程序的入口点

import WebFont from 'webfontloader';

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

现在应用字体家族。

Answer 4

假设您要使用CSSinJS，它涉及几处更改：

将md35@isu:/u1/work/python/mathquiz> python3 mathquiz.py File "mathquiz.py", line 27 if (z == 1): ^ IndentationError: unexpected indent md35@isu:/u1/work/python/mathquiz>更改为style
您将需要某种库来应用className。

使用react-jss

styles

或具有MaterialUI样式：

import React from 'react';
import 'typeface-roboto';
import injectSheet from 'react-jss';

const styles = {
  root: {
    fontFamily: 'Roboto',
  },
};

class Example extends React.Component {
  render() {
    return (
      <div className={styles.root}>
        This text is Roboto
      </div>
    )

  }
}

const StyledExample = injectSheet(styles)(Example)

export default StyledExample;

或者，you could just do it the right way，通过Dan的答案

或样式化组件方式：

import React from 'react';
import 'typeface-roboto';
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
  root: {
    fontFamily: 'Roboto',
  },
});

function Example(props) {
  const { classes } = props;

  return (
    <div className={classes.root}>
      This text is Roboto
    </div>
  );
}

export default withStyles(styles)(Example);

Answer 5

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

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

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

将字体导入React应用程序

5 个答案: