@font-face, показывающая ошибку 404 для шрифтов, импортированных .woff и .ttf
am, используя шрифт-face для импорта моего настраиваемого веб-шрифта, но шрифты не загружаются в браузеры, он показывает ошибку 404 файла, не найденную в консоли, но мои шрифты находятся в одном каталоге, а имена шрифтов такие же, как я упоминал в font-face
@font-face {
font-family: 'Proxima Nova';
src: url("../fonts/proximanova-light-webfont.eot");
src: url("../fonts/proximanova-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/proximanova-light-webfont.woff") format("woff"), url("../fonts/proximanova-light-webfont.ttf") format("truetype"), url("../fonts/proximanova-light-webfont.svg#ProximaNovaLight") format("svg");
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'Proxima Nova';
src: url("../fonts/proximanova-reg-webfont.eot");
src: url("../fonts/proximanova-reg-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/proximanova-reg-webfont.woff") format("woff"), url("../fonts/proximanova-reg-webfont.ttf") format("truetype"), url("../fonts/proximanova-reg-webfont.svg#ProximaNovaRegular") format("svg");
font-weight: normal;
font-style: normal;
}
Кроме того, я попытался добавить эти строки в .httaccess, он не работает, и я также просмотрел SO
, у кого нет правильного решения, ребята, пожалуйста, помогите мне.
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-opentype .otf
AddType image/svg+xml .svg
AddType application/x-font-ttf .ttf
AddType application/font-woff .wof
Ответы
Ответ 1
Работает ли ваш сайт на сервере Windows? Если да, попробуйте добавить правильные типы Mime для расширений шрифтов. Это может быть дубликат: Почему @font-face выбрасывает ошибку 404 для файлов Woff?
Btw, у вас есть опечатка в последнем предложении блока кода AddType в вашем вопросе. Его .woff(2 f).
Ответ 2
Попробуйте следующее:
@font-face {
font-family: 'Proxima Nova';
src: url("./fontsproximanova-light-webfont.eot");
src: url("./fontsproximanova-light-webfont.eot?#iefix") format("embedded-opentype"), url("./fontsproximanova-light-webfont.woff") format("woff"), url("./fontsproximanova-light-webfont.ttf") format("truetype"), url("./fontsproximanova-light-webfont.svg#ProximaNovaLight") format("svg");
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'Proxima Nova';
src: url("./fontsproximanova-reg-webfont.eot");
src: url("./fontsproximanova-reg-webfont.eot?#iefix") format("embedded-opentype"), url("./fontsproximanova-reg-webfont.woff") format("woff"), url("./fontsproximanova-reg-webfont.ttf") format("truetype"), url("./fontsproximanova-reg-webfont.svg#ProximaNovaRegular") format("svg");
font-weight: normal;
font-style: normal;
}
Директивы AddType
предназначены для того, чтобы сервер отправил файлы шрифтов с правильными заголовками MIME-типа (чтобы браузер знал, как их интерпретировать) и не поможет с ошибками 404. 404 указывает мне, что url
в CSS неверны.
Сообщите мне, если он работает.
Ответ 3
Я бы просто хотел добавить, поскольку этот вопрос преследовал меня, у Apache есть псевдоним для/icons/как часть/etc/httpd/conf.d/autoindex.conf