使用 SCSS 包含字体并创建 React 应用程序答案

【问题标题】：Including Fonts with SCSS and Create React App使用 SCSS 包含字体并创建 React 应用程序
【发布时间】：2021-06-06 17:58:42
【问题描述】：

我正在构建一个简单的 create-react-app 并使用 SCSS。我下载了一种自定义字体，并且拥有 .otf、.ttf 和 .woff 文件。我只打算使用 .otf 文件，但无论如何，我无法弄清楚我对该文件的相对参考将在哪里。这是我的目录结构：

app
|__public
|__src
   |__css
   |__fonts
   |__img
   |__sass
      |____abstracts
           |__(_fonts.scss)

在 _fonts.scss 文件中，这是我的代码：

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

我的 _base.scss 中有一个 CSS 选择器：

body {
    box-sizing: border-box;
    font-family: 'LeagueGothic', sans-serif;
    font-weight: 400;
    font-style: normal;
}

这是在开发服务器上运行的应用程序的屏幕截图（请注意 LeagueGothic 参考）：

我没有收到编译错误或类似的错误，但没有应用字体。我现在正在研究 webpack，看看我是否可以剖析构建过程并找出我的文件最终在哪里，以便我知道在哪里参考。我确信有一个更简单的解决方法，我只是找不到直接的答案。

【问题讨论】：

【解决方案1】：

尝试根据可用类型将格式指定为 format('opentype')：

可用的类型有：“woff”、“woff2”、“truetype”、“opentype”、“embedded-opentype”和“svg”。

【讨论】：