时间戳

首页 > 解决方案 > 使用 font-face 时出现 ERR_ABORTED 500 (Internal Server Error) 的原因是什么？

css - 使用 font-face 时出现 ERR_ABORTED 500 (Internal Server Error) 的原因是什么？

问题描述

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

事实 #1：

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

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

事实 #2：

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

事实 #3：

此外，对于每个组件，我都创建了一个单独的 css 文件。因此，我的 menu-bar-title 组件有自己的 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>
        );
    }
}

问题：

我的反应结构似乎一切顺利。组件按预期创建。但是，字体不起作用！当我检查时，控制台说：

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

这个错误告诉我css文件的流是ok的，因为它找到了相关的字体并试图从正确的目录加载它！然而，它不起作用！

您知道可能导致问题的原因吗？

谢谢你。

标签： cssnode.jsreactjs

解决方案

我认为 react 无法从这个 src 加载字体： url(/src/resource/font/montserrat-black.ttf);

推荐阅读