使用字体时出现ERR

字体时出现ERR"/>

使用字体时出现ERR

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

事实＃1：

[使用字体，我尝试托管一些所需的字体并在项目中使用它们。例如，

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

事实＃2：

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

事实＃3：

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

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

事实＃4：

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

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>
        );
    }
}

问题：

似乎一切都与我的反应结构配合得很好。该组件已按预期创建。但是，字体无法正常工作！当我检查时，控制台会显示：

获取http://localhost:3000/src/resource/font/montserrat-black.ttf net :: ERR_ABORTED 500（内部服务器错误）index.js：1

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

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

谢谢。

我认为react无法从此src加载字体：url（/src/resource/font/montserrat-black.ttf）;