React CRA：从字体文件夹预加载字体答案

【问题标题】：React CRA: Preload fonts from fonts folderReact CRA：从字体文件夹预加载字体
【发布时间】：2021-10-19 03:26:38
【问题描述】：

我正在使用 react 并通过 SCSS 使用自定义字体：

@font-face {
  font-family: 'FiraGO Bold';
  src: url('../../fonts/FiraGO-Bold.woff2') format('woff2'),
    url('../../fonts/FiraGO-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FiraGO Medium';
  src: url('../../fonts/FiraGO-Medium.woff2') format('woff2'),
    url('../../fonts/FiraGO-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FiraGO';
  src: url('../../fonts/FiraGO-Regular.woff2') format('woff2'),
    url('../../fonts/FiraGO-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

// Fonts
:root {
  --font-base: 'FiraGO', sans-serif;
  --font-bold: 'FiraGO Bold', sans-serif;
  --font-medium: 'FiraGO Medium', sans-serif;
}

但我在灯塔上看到了这个问题

我可以只在链接中使用预加载，因为这不是托管字体，因此字体文件也在构建中进行了哈希处理。

【问题讨论】：

标签： javascript css reactjs fonts create-react-app

【解决方案1】：

为此，您需要在 SCSS 构建之外拆分字体文件，例如，您可以将其设置在 fonts 目录中的公共 HTML 中并使用它。（我这样做是为了一些外部资源及其工作）

现在你可以如何做到这一点：（示例）

  <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>

然后你可以添加：

@font-face {
    font-family: 'ciclefina';
    src: url('fonts/cicle_fina-webfont.eot');
    src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
         url('fonts/cicle_fina-webfont.woff') format('woff'),
         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
    font-weight: normal;
    font-style: normal;
}

或者您可以将这些字体的字体和 CSS 移动到公共 HTML 目录并在 index.html 中直接添加预加载

或者你可以在 index.html 中添加：<link rel="preload" href="yourFont.woff2" as="font" />

【讨论】：