如何在我的 React 应用程序中修复 @fontface 问题？

Question

我正面临自定义字体的问题。我使用 create-react-app 创建了一个应用程序，并在公共文件夹中提供了自定义字体文件 (.ttf)，以便在构建应用程序时，所有资产都是构建的一部分。我可以在本地看到字体，但在 nginx 服务器上看不到。Nginx 服务器有 .ttf 支持，因为另一个应用程序工作正常。失恋应该是什么？我无法找到它。此外，firefox 无法加载相同的自定义字体。这是我的样式表 -

@font-face {
    font-family: 'Simplied';
    src: url('/fonts/simplied-Light.ttf') format('truetype');
  }

我使用@import 'stylesheet.css' 将其导入到另一个 css 文件中。

PS感谢您的评论。我做了这样的改变 -

//  ./index.css
@font-face {
  font-family: 'Simplified_Lt';
  font-display: block;
  src: local('Simplified_Lt') url(./fonts/Simplified_Lt.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  margin: 0;
  font-family:'Simplified_Lt';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

我的字体文件夹在 src/fonts/ 下。但是我仍然无法使用该字体。请您指出可能遗漏了什么或项目结构是否正确？我正在使用 create-react-app。

Answer 1

create-react-app (CRA) 在进行生产构建时对文件名进行哈希处理。

听起来您有以下设置：

// index.js
import './index.css`

/* index.css */
@import 'stylesheet.css`;

/* other styling */

/* stylesheet.css */
@font-face {
  font-family: 'Simplied';
  src: url('/fonts/simplied-Light.ttf') format('truetype');
}

使用默认散列构建后

当 CRA 运行生产版本时，它会散列文件名，并更新对散列文件的引用。但是，在某些时候重命名感知的方式是有限制的。

构建后，您的/build文件夹将包含名称如下的文件：

index.a31171f2.js
index.a31171f2.css
stylesheet.a31171f2.css

CRA 查看 javascript 文件并更新任何导入以包含哈希：

// index.a31171f2.js
import './index.a31171f2.css'

但是，它不会在静态 CSS 文件中进行相同的修改：

/* index.a31171f2.css */
@import 'stylesheet.css`;

/* other styling */

由于/build目录有stylesheet.a31171f2.css，而不是stylesheet.css，你@import失败了。

解决方案

1. 将@font-face声明移动到您的 中index.css，而不是尝试@import从另一个文件中移动它。

/* index.css */
@font-face {
  font-family: 'Simplied';
  src: url('/fonts/simplied-Light.ttf') format('truetype');
}

/* other styling */

2. 直接将这两个 CSS 文件导入到您的 javascript 中：

// index.js
import './stylesheet.css'
import './index.css`

有一些方法可以防止构建时散列，但这通常不是一个好主意，因为您失去了自动缓存破坏的好处。

最后，如果您Simplied的系统上安装了该字体，这将解释为什么它可以在本地运行，但不能在您的远程服务器上运行。当你在本地开发时，@import幕后仍然失败，但你的浏览器直接从你的系统加载字体，所以你仍然可以看到预期的字体。