javascript - 如何在React中使用下载的字体？

Question

我遇到了自定义字体的问题。我已在公共(public)文件夹中提供了自定义字体文件 (.ttf)，以便在构建应用程序时，所有资源都是构建的一部分。应该错过什么？我找不到它。 我查过这个How can i fix @fontface issue in my react application?解决方案不起作用

    @font-face{
      font-family: 'FrutigerLTPro';
      src:url('./fonts/frutiger/FrutigerLTPro-Black.ttf')  format('truetype');
      font-weight: 300;
      font-style: normal;
      font-display: auto;
    }
   body {
      font-family: FrutigerLTPro,inherit auto;
    }

网络包:

{
   test: /\.(eot|otf|ttf|woff|woff2)$/,
   use: 'file-loader',
   include: [/fonts/]
},

Answer 1

无需单独的处理器

第 1 步:在 css 文件中导入字体

@font-face {
  font-family: 'Darkenstone';
  src: url('./Darkenstone.woff') format('woff');
}

第 2 步:

在 webpack 中使用标准文件加载器

{ test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file?name=src/css/[name].[ext]'}

第 3 步:

在根js文件中添加css文件(如app.jsx、index.jsx等)

import '../assets/css/fonts.css'