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

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']
   }
});

我犯了这样的错误。

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

你可以使用WebFont模块，它极大地简化了这个过程。

render(){
  webfont.load({
     custom: {
       families: ['MyFont'],
       urls: ['/fonts/MyFont.woff']
     }
  });
  return (
    <div style={your style} >
      your text!
    </div>
  );
}

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

你可以在不需要CSS的情况下使用Web API FontFace构造函数(也可以是Typescript):

export async function loadFont(fontFamily: string, url: string): Promise<void> {
    const font = new FontFace(fontFamily, `local(${fontFamily}), url(${url})`);
    // wait for font to be loaded
    await font.load();
    // add font to document
    document.fonts.add(font);
    // enable font with CSS class
    document.body.classList.add("fonts-loaded");
}

import ComicSans from "./assets/fonts/ComicSans.ttf";

loadFont("Comic Sans ", ComicSans).catch((e) => {
    console.log(e);
});

声明一个文件字体。ts与你的模块(仅ts):

declare module "*.ttf";
declare module "*.woff";
declare module "*.woff2";

如果TS无法找到FontFace类型作为其正式在制品，则将此声明添加到项目中。它可以在你的浏览器中运行，除了IE。

我花了整个上午的时间来解决这个堆栈问题。我在上面的答案中使用了Dan的第一个解决方案作为出发点。

问题

我有一个开发(在我的本地机器上)、登台和生产环境。我的登台和生产环境位于同一台服务器上。

应用程序通过acmeserver/~staging/note-taking-app部署到登台，生产版本位于acmeserver/note-taking-app(归咎于IT)。

所有媒体文件(如字体)在dev上加载都很好(即，react-scripts启动)。

然而，当我创建和上传登台和生产版本时，虽然.css和.js文件加载正常，但字体却不能。编译后的.css文件看起来有一个正确的路径，但是浏览器http请求得到了一些非常错误的路径(如下所示)。

编译后的main.fc70b10f.chunk.css文件:

@font-face {
  font-family: SairaStencilOne-Regular;
  src: url(note-taking-app/static/media/SairaStencilOne-Regular.ca2c4b9f.ttf) ("truetype");
}

浏览器http请求如下所示。注意，当字体文件仅仅存在于/static/media/中时，它是如何添加到/static/css/中的，以及如何复制目标文件夹。我排除了服务器配置是罪魁祸首的可能性。

推荐人也有部分过错。

GET /~staging/note-taking-app/static/css/note-taking-app/static/media/SairaStencilOne-Regular.ca2c4b9f.ttf HTTP/1.1
Host: acmeserver
Origin: http://acmeserver
Referer: http://acmeserver/~staging/note-taking-app/static/css/main.fc70b10f.chunk.css

包。Json文件首页属性设置为。/ notes -taking-app。这就是问题的根源。

{
  "name": "note-taking-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "./note-taking-app",
  "scripts": {
    "start": "env-cmd -e development react-scripts start",
    "build": "react-scripts build",
    "build:staging": "env-cmd -e staging npm run build",
    "build:production": "env-cmd -e production npm run build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
  //...
}

解决方案

这很冗长，但解决方案是:

根据环境改变PUBLIC_URL env变量 从包中删除主页属性。json文件

下面是我的.env-cmdrc文件。我使用.env-cmdrc而不是常规的.env，因为它将所有内容都放在一个文件中。

{
  "development": {
    "PUBLIC_URL": "",
    "REACT_APP_API": "http://acmeserver/~staging/note-taking-app/api"
  },
  "staging": {
    "PUBLIC_URL": "/~staging/note-taking-app",
    "REACT_APP_API": "http://acmeserver/~staging/note-taking-app/api"
  },
  "production": {
    "PUBLIC_URL": "/note-taking-app",
    "REACT_APP_API": "http://acmeserver/note-taking-app/api"
  }
}

通过react-router-dom进行路由也可以，只需使用PUBLIC_URL env变量作为basename属性即可。

import React from "react";
import { BrowserRouter } from "react-router-dom";

const createRouter = RootComponent => (
  <BrowserRouter basename={process.env.PUBLIC_URL}>
    <RootComponent />
  </BrowserRouter>
);

export { createRouter };

服务器配置被设置为将所有请求路由到。/index.html文件。

最后，下面是实现上述更改后编译的main.fc70b10f.chunk.css文件的样子。

@font-face {
  font-family: SairaStencilOne-Regular;
  src: url(/~staging/note-taking-app/static/media/SairaStencilOne-Regular.ca2c4b9f.ttf)
    format("truetype");
}

阅读材料

https://create-react-app.dev/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env https://create-react-app.dev/docs/deployment#serving-apps-with-client-side-routing https://create-react-app.dev/docs/advanced-configuration this explains the PUBLIC_URL environment variable Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in package.json (homepage). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application.