如何在我的反应应用程序中修复 @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 文件中导入。

P.S 感谢您的评论。我做了这样的改变-

//  ./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 */

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

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

There are ways to prevent build-time hashing，但这通常不是一个好主意，因为您失去了自动缓存清除的好处。

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