Я разрабатываю проект с полным стеком, используя React, Node и Express. Я не уверен, связан ли стек с проблемой, но вы можете найти его в этом вопросе.
Факт №1 :
Используя fon-face, я попытался разместить некоторые желаемые шрифты и использовал их в проекте. Например,
@font-face {
font-family: Montserrat-Black;
src: url(/src/resource/font/montserrat-black.ttf);
}
Fact # 2 :
Я помещаю font-face в индекс. css, и упомянутый файл css импортируется в индекс. js. Вы должны знать, что при использовании React в конечном итоге все компоненты загружаются внутри index. js. Следовательно, все компоненты и окончательно сгенерированное Dom-дерево должны были найти стили.
Факт № 3 :
Кроме того, для каждого компонента я создал отдельный файл css. Итак, мой компонент заголовка строки меню имеет свой собственный файл css, в который включены связанные стили. Например, заголовок строки меню. 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 в порядке, потому что он нашел соответствующий шрифт и попробовал чтобы загрузить его из правильной директрой! Тем не менее, это не работает!
У вас есть идеи, что могло вызвать проблему?
Спасибо.