将字体导入React应用程序

Question

我正在尝试在我的应用程序中使用Roboto字体，但遇到了一些困难。

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

我想要做的是这样的：

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

- Egor Egorov

---

https://dev59.com/dlgR5IYBdhLWcg3wJqi7 - Paul McLoughlin

@PaulMcloughlin 谢谢，但在提问之前我已经看过那个问题了，但是它对我来说毫无意义（我没有使用create-react-app）...有没有办法在React内联样式（没有CSS文件）中使用来自本地文件（节点模块）的字体？ - Egor Egorov

你能看一下这篇文章，或许会有所帮助。 - milkersarac

可能是如何将字体添加到基于create-react-app的项目中？的重复问题。 - tgrrr

Answer 1

将此行代码导入您的主CSS或SCSS中，无论您使用哪种语言

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

这将起作用。 如果您想自定义此内容，请转到 Google 字体并选择字体样式，字重等任何您想要的内容。 在这里，我已经选择了字重 400、300 和 700。 如果没有选择字重，则无法使用其他字重。

- Sourabh Dubey

Answer 2

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

在我的情况下，我将字体系列添加到body元素中，它可以工作。

- Parameshwar Ande

---

同意。我在index.js中添加了import 'typeface-roboto';，然后在我的单独的index.css文件中添加了font-family: 'Roboto';，它起作用了！ - hoohoo-b

Answer 3

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

我使用了webfontloader包。Original Answer翻译成"最初的回答"。

yarn add webfontloader

或者

npm install webfontloader --save 

一旦完成此步骤，请将以下代码添加到您的index.js或JS文件中，该文件是您应用程序的入口点

import WebFont from 'webfontloader';

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

And now apply the font-family.

- Priyank Thakkar

Answer 4

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

- Nesuarg

---

require在ES6中已被弃用。 - Akhil Aravind

Answer 5

如果你想使用CSSinJS，需要进行一些更改：

1. 将style更改为className
2. 你需要某种库来应用styles

使用react-jss

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;

或者使用MaterialUI样式：

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);

或者，你可以按照正确的方式，通过 Dan 的回答

或者使用 Styled-Components 方式：

import styled from 'styled-components'

const ExampleStyled = styled.div`
  @font-face {
    font-family: 'Roboto';
    src: local('Roboto'), url(fonts/Roboto.woff) format('woff');
  }
`

const Example = () => (
  <ExampleStyled>
     This text is Roboto!
  </ExampleStyled>
);

export default Example;

- tgrrr