当使用不同的字体文件为正常/斜体字体风格时，您指定@font-face的方式可能需要根据入口点而不同。请看我的回答:

如果你选择将css文件直接链接到public/index.html，那么你通常可以使用一个字体家族名称和不同的字体风格的font-face:

@font-face {
  font-family: "FontName"; <---
  font-style: normal; <---
  font-weight: normal;
  src: url("path-to-assets/fonts/FontName.ttf") format("truetype");
}
@font-face {
  font-family: "FontName"; <---
  font-style: italic; <---
  font-weight: normal;
  src: url("path-to-assets/fonts/FontName-Italic.ttf") format("truetype");
}

/* Usage */
.text {
  font-family: FontName;
  font-style: normal;
}
.text-italic {
  font-family: FontName;
  font-style: italic;
}

如果你选择通过Js链接css文件进行捆绑，那么你需要为所有斜体字体设置一个不同的字体族名称，并使用正常的字体样式。

@font-face {
  font-family: "FontName"; <---
  font-style: normal; <---
  font-weight: normal; /* normal | 300 | 400 | 600 | bold | etc */
  src: url("path-to-assets/fonts/FontName.ttf") format("truetype");
}
@font-face {
  font-family: "FontNameItalic";
  font-style: normal; <----
  font-weight: normal; /* normal | 300 | 400 | 600 | bold | etc */
  src: url("path-to-assets/fonts/FontName-Italic.ttf") format("truetype");
}

/* Usage */
.text {
  font-family: FontName;
}
.text-italic {
  font-family: FontNameItalic;
}

链接到react js的本地字体可能会失败。所以，我更喜欢使用在线css文件从谷歌链接字体。参考以下代码，

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

or

<style>
    @import url('https://fonts.googleapis.com/css?family=Roboto');
</style>

我犯了这样的错误。

@import "https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i&subset=cyrillic,cyrillic-ext,latin-ext";
@import "https://use.fontawesome.com/releases/v5.3.1/css/all.css";

它以这种方式正常工作

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i&subset=cyrillic,cyrillic-ext,latin-ext);
@import url(https://use.fontawesome.com/releases/v5.3.1/css/all.css);

我的感觉是，如果你在你的网站上有本地的字体，你应该能够使用CSS字体加载API在运行时为你做字体加载，而不使用CSS文件。这是我写的一个React组件。它是基于上面user-rebo的答案，但尝试在使用后卸载字体。它似乎可以在火狐和Chrome浏览器中运行。代码是:

import React, { useEffect, PropsWithChildren, useRef } from "react";

type FontFaceFormat =
  | "woff"
  | "woff2"
  | "truetype"
  | "opentype"
  | "embedded-opentype"
  | "svg";

type FontWrapperProps = {
  fontName: string;
  fontURL: string;
  fontFormat?: FontFaceFormat;
};

/*
 * The FontWrapper class. Takes a fontName (like "Andika"), a fontURL (which
 * should go to the website's public folder), and an optional font type. Usage
 * should be as simple as:
 *
 * <FontWrapper fontName="Andika" fontURL="/fonts/Andika-Regular.ttf.woff2">
 *   <p>This is some text</p>
 * </FontWrapper>
 *
 * Note: document.fonts is of type FontFaceSet, which should include the add() and
 * delete() methods. However, the TypeScript libraries for Visual Studio Code
 * miss these. That's why I have two instances of "document.fonts as any" -
 * to make those red lines go away.
 */

export default function FontWrapper({
  fontName,
  fontURL,
  fontFormat = "woff2",
  children,
}: PropsWithChildren<FontWrapperProps>) {
  const fontRef = useRef(null);

  useEffect(() => {
    const loadFont = async () => {
      const font = new FontFace(
        fontName,
        `url(${fontURL}) format("${fontFormat}")`,
        {}
      );
      const fontResult = await font.load();
      fontRef.current = fontResult;
      await (document.fonts as any).add(font);
    };

    const unloadFont = async () => {
      await (document.fonts as any).delete(fontRef.current);
    };

    loadFont();

    return () => {
      unloadFont();
    };
  }, []);

  return <div style={{ fontFamily: fontName }}>{children}</div>;
}

用法是:

<FontWrapper fontName="Andika" fontURL="/fonts/Andika-Regular.ttf.woff2">
  <p>This is some text</p>
</FontWrapper>

我添加了

@font-face {
    font-family: 'Sanchez-Regular';
    src: local('Sanchez-Regular'),url(../assets/fonts/Sanchez/Sanchez-Regular.ttf) format('truetype');
}

而且效果非常好 就像我们在index.css中使用其他字体一样

去谷歌字体https://fonts.google.com/ 选择如下图所示的字体:

复制并粘贴该url在新选项卡，你会得到css代码添加该字体。在这种情况下，如果你去

https://fonts.googleapis.com/css?family=Spicy+Rice

它会像这样打开:

4、复制并粘贴到你的style.css中，然后像这样简单地开始使用那种字体:

      <Typography
          variant="h1"
          gutterBottom
          style={{ fontFamily: "Spicy Rice", color: "pink" }}
        >
          React Rock
        </Typography>

结果: