我该如何在我的React应用程序中解决@fontface问题? [英] How can i fix @fontface issue in my react application?

问题描述

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

I am facing an issue with custom fonts. I have created an app using create-react-app and provided the custom font files (.ttf) in public folder so that while building the app, all assests are part of the build. I am able to see the font on my local but not on nginx server. Nginx server has the .ttf support since another application is working fine. What should be the miss? I am not able to find it. Also, firefox is not able to load the same custom font. Here is my stylesheet -

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

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

which i import in another css file using @import 'stylesheet.css'.

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

P.S Thanks for the comment. I made the change like this -

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

and my fonts folder is under src/fonts/. But i am still not able to use the font.Can you please point out to me what could have been missed or if project structure is correct? I am using create-react-app.

推荐答案

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

听起来您已经按照以下步骤进行了设置:

create-react-app (CRA) hashes filenames when it does a production build.

It sounds like you have a setup along these lines:

// 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运行生产版本时，将对文件名进行哈希处理，并更新对哈希文件的引用.但是，在某些时候，重命名感知的方式存在局限性.

When CRA runs a production build, it hashes filenames, and updates references to the hashed files. However, there are limitations to how rename-aware it is at some points.

构建后，您的/build 文件夹将包含名为以下文件的文件:

After a build, your /build folder will contain files named something like this:

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

CRA浏览javascript文件并更新所有导入内容以包括哈希值:

CRA looks through javascript files and updates any imports to include the hash:

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

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

However, it doesn't make those same modifications inside static CSS files:

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

/* other styling */

由于/build 目录具有 stylesheet.a31171f2.css ，而不是 stylesheet.css ，因此您的 @import 失败.

Since the /build directory has stylesheet.a31171f2.css, and not stylesheet.css, your @import fails.

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

1. Move the @font-face declaration into your index.css, instead of trying to @import it from another file.

/* 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, but it's not generally a good idea, as you lose the benefits of automatic cache-busting.

最后，如果您的系统上安装了 Simplied 字体，这将说明为什么它在本地运行而不在远程服务器上运行.在本地进行开发时， @import 仍在后台运行，但浏览器直接从系统加载字体，因此仍可以按预期看到字体.

Lastly, if you have the Simplied font installed on your system, this would explain why it's working locally but not on your remote server. When you're developing locally, the @import is still failing behind the scenes, but your browser is loading the font directly from your system, so you still see the font as expected.

这篇关于我该如何在我的React应用程序中解决@fontface问题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！