我的感觉是，如果你在你的网站上有本地的字体，你应该能够使用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>

以下是一些做到这一点的方法:

1. 导入字体

例如，要使用Roboto，请使用

yarn add typeface-roboto

or

npm install typeface-roboto --save

在index.js:

import "typeface-roboto";

有很多开源字体和大部分谷歌字体的npm包。你可以在这里看到所有的字体。所有的包都来自那个项目。

2. 对于由第三方托管的字体

比如谷歌字体，你可以去fonts. Google。com在那里你可以找到你可以放在public/index.html中的链接

就像这样

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

or

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

3.下载字体并将其添加到源代码中。

下载字体。例如，对于谷歌字体，您可以访问fonts.google.com。点击下载按钮下载字体。

移动字体到字体目录在你的src目录

src
|
`----fonts
|      |
|      `-Lato/Lato-Black.ttf
|       -Lato/Lato-BlackItalic.ttf
|       -Lato/Lato-Bold.ttf
|       -Lato/Lato-BoldItalic.ttf
|       -Lato/Lato-Italic.ttf
|       -Lato/Lato-Light.ttf
|       -Lato/Lato-LightItalic.ttf
|       -Lato/Lato-Regular.ttf
|       -Lato/Lato-Thin.ttf
|       -Lato/Lato-ThinItalic.ttf
|
`----App.css

现在，在app。css中添加这个

@font-face {
  font-family: 'Lato';
  src: local('Lato'), url(./fonts/Lato-Regular.otf) format('opentype');
}

@font-face {
    font-family: 'Lato';
    font-weight: 900;
    src: local('Lato'), url(./fonts/Lato-Bold.otf) format('opentype');
}

@font-face {
    font-family: 'Lato';
    font-weight: 900;
    src: local('Lato'), url(./fonts/Lato-Black.otf) format('opentype');
}

对于ttf格式，必须提到format('truetype')。对于woff, format('woff')

现在你可以在课堂上使用这种字体了。

.modal-title {
    font-family: Lato, Arial, serif;
    font-weight: black;
}

4. 使用web-font-loader包

使用

yarn add webfontloader

or

npm install webfontloader --save

在src/index.js中，你可以导入它并指定所需的字体

import WebFont from 'webfontloader';

WebFont.load({
   google: {
     families: ['Titillium Web:300,400,700', 'sans-serif']
   }
});

去谷歌字体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>

结果:

链接到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>

当使用不同的字体文件为正常/斜体字体风格时，您指定@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;
}

我添加了

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

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