字体时出现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);
更多推荐
使用字体时出现ERR
发布评论