如何在反应中使用下载的字体？

Question

我遇到了自定义字体的问题。我在公共文件夹中提供了自定义字体文件 (.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'