javascript - React JS 添加本地字体

Question

我想在我的本地机器上添加一个自定义字体，我在 src/fonts/ 中添加了字体，字体文件本身被命名为 DIN Next LT Arabic Regular.ttf 。

我发现其中一个答案建议我应该这样说并将这一行添加到我的 index.css 文件

@font-face {
  font-family: 'DIN Next LT Arabic Regular' !important;
  src: local('DIN Next LT Arabic Regular'), url('./fonts/DIN Next LT Arabic Regular.ttf') format('truetype');
}

然后将 index.css 导入我的 index.js，这已经由 create-react-app 命令完成。

但它不起作用，我不知道为什么。

PS:我有一个 .env 文件，其中包含此行 NODE_PATH=src/ 不使用相对路径。

Answer 1

你可以使用“Web Font Loader”在你的react-app中导入字体，所以你可以安装这个工具使用

npm install webfontloader --save

这只是一个例子:

1- 在你的 public/index.html 中复制字体的链接

2- 然后打开 src/index.js 并添加:

import WebFont from 'webfontloader';

  WebFont.load({

    google: {
      families: ['Droid Sans', 'Droid Serif']

     }});