Question

我必须在我的React项目中使用特定的字体设置。

Fonts (Sizes should be automatically calculated)

H1 - Helvetica Bold
H2 - Helvetica Light
H3 - Helvetica Bold
H4 - Helvetica Bold
H5 - Helvetica Regular
H6 - Helvetica Regular
Body 1 - Open Sans Regular
Body 2 - Open Sans Regular
Subtitle 1 - Open Sans Regular
Subtitle 2 - Open Sans Regular
Button - Open Sans Regular
Caption - Open Sans Regular
Overline - Helvetica Regular

是我需要使用的规格。

我尝试使用WebFont来执行此操作。我将下面的代码放到我的index.js

从＆＃39; webfontloader＆＃39;

导入WebFont

WebFont.load({
  google: {
        families: ['Helvetica:300,500,700','Material Icons']
    }
});

但是，我不知道如何用它来指定其他东西，如Headers，Body和Subtitle。

        <Typography use="headline1">headline1</Typography>
        <Typography use="headline2">headline2</Typography>
        <Typography use="headline3">headline3</Typography>
        <Typography use="headline4">headline4</Typography>
        <Typography use="headline5">headline5</Typography>
        <Typography use="headline6">headline6</Typography>
        <Typography use="subtitle1">subtitle1</Typography>
        <Typography use="subtitle2">subtitle2</Typography>
        <Typography use="body1">body1</Typography>
        <Typography use="body2">body2</Typography>
        <Typography use="caption">caption</Typography>
        <Typography use="button">button</Typography>
        <Typography use="overline">overline</Typography>

我尝试使用Typography FYI渲染字体。

Answer 1

您可以使用styled componets。或者即使没有这个库，也可以创建一个组件来包装像<Subtitle1>{props.children}</Subtitle1>这样的子项，并在本地样式中应用字体设置。

如何在React项目

1 个答案: