Css 如何解决react应用程序中的@fontface问题？

我面临自定义字体的问题。我已经使用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文件中

谢谢你的评论。我是这样做的-

//  ./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/下。但我仍然不能使用字体。你能告诉我哪些地方可能遗漏了，或者项目结构是否正确吗？我正在使用CreateReact应用程序。

CreateReact应用程序（CRA）在进行生产构建时对文件名进行哈希运算。
听起来您有以下几方面的设置：

//index.js
导入“./index.css”`

/*index.css*/
@导入“stylesheet.css”；
/*其他样式*/

/*stylesheet.css*/
@字体{
字体系列：“简化”；
src:url（'/fonts/simplied Light.ttf'）格式（'truetype'）；
}



使用默认哈希生成后
当CRA运行生产构建时，它会散列文件名，并更新对散列文件的引用。但是，在某些情况下，重命名感知的方式存在局限性

生成后，您的
/build
文件夹将包含以下文件：

index.a31171f2.js
索引1.a31171f2.css
stylesheet.a31171f2.css

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

//index.a31171f2.js
导入“./index.a311f2.css”

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

/*index.a31171f2.css*/
@导入“stylesheet.css”；
/*其他样式*/

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



解决
将
@font-face
声明移动到
index.css
中，而不是尝试从另一个文件导入它
/*index.css*/
@字体{
字体系列：“简化”；
src:url（'/fonts/simplied Light.ttf'）格式（'truetype'）；
}
/*其他样式*/



直接将两个CSS文件导入javascript：
//index.js
导入“./stylesheet.css”
导入“./index.css”`



，但这通常不是一个好主意，因为您失去了自动破坏缓存的好处

最后，如果您的系统上安装了
简化版
字体，这将解释为什么它在本地工作，而不是在远程服务器上工作。当您在本地开发时，
@import
在幕后仍然失败，但是您的浏览器直接从系统加载字体，因此您仍然可以看到预期的字体。
谢谢您的评论。我已经按照建议进行了更改并更新了我的问题，但仍然无法加载字体。你能看看我是否遗漏了什么吗？其他需要检查的事项：1）当你运行
warn build
时，你的字体文件是否被复制到
/build
目录中？2） 如果是，那么
/font/Simplified_Lt.ttf
是否是从编译的CSS文件到这些文件的正确路径？3） 查看您的web inspector的网络窗格：您的字体文件是否有一个简单的
404
，或者是否有不同的状态代码？谢谢，这对我很有用“直接将两个CSS文件导入javascript”