当我使用字体时,ERR_ABORTED 500(内部服务器错误)的原因是什么?

我正在使用React,Node和Express开发一个全栈项目。我不确定堆栈是否与问题有关,尽管您可能会发现它与问题有关。

事实1:

我使用fon-face尝试托管一些所需的字体,并在项目中使用了它们。例如,

@font-face {
  font-family: Montserrat-Black;
  src: url(/src/resource/font/montserrat-black.ttf);
}

事实二:

我将font-face放在index.css中,并且提到的css文件被导入到index.js中。您应该知道最终使用React,所有组件都被加载到index.js中。因此,所有组件和最终生成的Dom树都应该找到样式。

事实三:

此外,对于每个组件,我都创建了一个单独的css文件。因此,我的菜单栏标题组件具有其自己的css文件,其中集成了相关样式。例如,menu-bar-title.css包含以下行。

#menuBarTitle{
    font-family:Montserrat-Black;
}

事实四:

这就是开发上述组件的方式。

import React from 'react';
import './css/menu-bar-title.css'

export default class MenuBarTitle extends React.Component {
    render() {
        return (
            <div id="menuBarTitle" className="absolute">
                HELLO WORLD!
            </div>
        );
    }
}

问题:

看来我的反应结构一切正常。该组件已按预期创建。 但是,字体无法正常工作!当我检查时,控制台会说:

GET http://localhost:3000/src/resource/font/montserrat-black.ttf net::ERR_ABORTED 500 (Internal Server Error) index.js:1

这个错误告诉我,css文件的流程还可以,因为它找到了相关的字体,并试图从正确的Directroy加载它!但是,它不起作用!

您知道什么可能导致了问题吗?

谢谢。