Помилка Font-Awesome 404 на шрифтах


78

Я не знаю, що відбувається, але на консолі браузера я бачу 3 помилки, пов’язані з чудовими шрифтами

 GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff2?v=4.3.0 
 GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff?v=4.3.0
 GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.ttf?v=4.3.0 

Я знаю, що це смішно, я не можу зрозуміти це самостійно, але, здається, все в порядку, у моєму index.html у мене є щось подібне

<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />

і це все, що я пов’язав із чудовими шрифтами, я вже перевірив шлях і не помиляюся в цьому.

Це відбувається з кимось із вас, хлопці?

введіть тут опис зображення

ОНОВЛЕННЯ

це частина NGINX, де я завантажую деякий вміст у заголовки

add_header Content-Security-Policy "style-src 'self' 'unsafe-inline'
https://fonts.googleapis.com
https://fonts.gstatic.com
https://themes.googleusercontent.com
https://assets.zendesk.com;
font-src 'self' https://themes.googleusercontent.com
https://fonts.gstatic.com;";

1
Ви завантажили шрифти на свій сервер?
Вучко

@Vucko як мені це робити?
Не

Відповіді:


80

Додайте .woff до типу mime вашого сервера додатків (наприклад, iis-> mime type) як application / font-woff


5
Мені довелося зробити два записи, один для woff та другий для woff2. Працював як оберіг. Дякую!
Gaʀʀʏ

139

А ще краще, додайте цей розділ до свого web.config, і тоді ці типи mime будуть автоматично додані до IIS на будь-якому сервері, на якому ви розгортаєтеся. (Видалення полягає в тому, щоб уникнути повторюваної помилки типу mime, якщо вони вже є)

  <system.webServer>
    <staticContent>
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="font/x-woff" />
    </staticContent>  
  </system.webServer>

1
Якщо файл не був зіставлений з типом mime, тоді в консолі було видно повідомлення про відсутність файлу. Після додавання визначення розширення файлу та типу mime fontawesome woff2 завантажується правильно. Дякую.
Marek Bar

1
Це, безумовно, найпрактичніше рішення для людей, які використовують веб-програми .NET.
DVK

1
@jhoelz Це, безумовно, найкраща з найкращих відповідей для ВЕБ-РОЗРОБНИКА, який зазвичай не має прямого доступу до веб-сервера! Велике спасибі, дійсно.
dpant

У мене була ця проблема після публікації на Azure. Ваше рішення спрацювало як шарм. Дуже дякую.
perozzo

Це також працює для хлопців, які використовують Служби програм Azure для розгортання своїх інтерфейсних програм. Наприклад, для Angular помістіть web.configфайл в папку / src, а потім налаштуйте angular.json / angular-cli.json, щоб додати його "src/web.config"в масив активів. Після цього просто розгорніть все в Azure, як зазвичай. Такі помилки .woff / woff2 зникли.
hastrb

8

у мене була така сама проблема з iis. Я додав новий тип mime із ".woff2" як розширення файлу та "font / x-woff" як тип mime, і проблема вирішена.


6

1. Перейдіть до IIS, знайдіть свій веб-сайт, знайдіть MIME Type, а потім натисніть Додати

2. Поставте "woff2" у назву вкладеного файлу. Покладіть "application / font-woff" у тип MIME

3.Перезапустіть свій веб-сайт у службі IIS


3

Усі надані вами URL-адреси недійсні і не посилаються на ресурс. Наскільки кожен із нас зможе сказати з вашого допису - їх просто не існує.

Чи правильно ви завантажили свої файли для передбачуваної структури папок?


все було нормально, поки я не вирішив додати Content-Security-Policy, дивіться моє ОНОВЛЕННЯ з питання, будь ласка. А про які посилання ви говорите?
Не

якщо ви кажете, що ці посилання, //www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff2?v=4.3.0 звичайно, працюють, це www.desktop.just4bettors.mobiсторінка, над якою я працюю, ні, але не отримую цих посилань для чудової шрифтової частини.
Не

www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff2?v=4.3.0 та www.desktop.just4bettors.mobi/bower_components/font-awesome/css/font-awesome.css обидва переходять до 404 Not Found .
xengravity

ці посилання є локальними, just4bettors - це той домен, над яким я працюю.
Не

3
Я пропоную спробувати CDN дуже швидко, щоб перевірити, чи це вирішує проблему. Здається, ви посилаєтесь на нього неправильно локально, тому, якщо ви можете посилатися на CDN, і він працює, ви знаєте, що файл, який ви маєте локально, знаходиться в неправильному місці.
xengravity

1

У мене була така сама проблема на "сервері спільного хосту cPanel", який дозволяє лише веб-сервер Apache2. Оскільки узагальнюючі символи (*) значення 'Access-Control-Allow-Origin' заборонені загальними параметрами безпеки хоста (оскільки: пропускна здатність та крадіжки ресурсів), мені довелося знайти інший спосіб змусити це працювати.

Це запитання, поставлене ОП, випливає з nginx, але прийняті та найбільш прихильні відповіді, здається, стосуються IIS. Можливо, такі люди, як я, натрапляють на це питання, шукаючи рішення Apache2, пов’язані з «дозволами» CORS в Apache, тож ось магічна куля вирішила цю проблему для мене. Я додав наступне в тіппі-верх мого кореневого каталогу веб-сайту WP у файлі .htaccess:

<IfModule mod_headers.c>
 <IfModule mod_rewrite.c>
    SetEnvIf Origin "http(s)?://(.+\.)?(othersite\.com|mywebsite\.com)(:\d{1,5})?$" CORS=$0
    Header set Access-Control-Allow-Origin "%{CORS}e" env=CORS
    Header merge  Vary "Origin"
 </IfModule>
</IfModule>

Я хотів би взяти кредит за цю фантастичну частину магії RegEX, але я пояснюю, як я вивів це рішення у цьому коментарі до поста, до подібного питання тут: Піддомени, порти та протоколи підстановки Access-Control-Allow-Origin

** Очевидно ПРИМІТКА: Вам потрібно змінити ім'я домену, щоб воно відповідало вашому власному. Ви можете видалити (|) RegEx АБО і просто використовувати одне доменне ім'я, у якому ВСІ субдомени І доменне ім'я кореневого рівня приймаються RegEx


1

Жодне з наведених вище рішень не працювало для мене, крім наступного. Будь ласка, додайте цей рядок після всіх команд "bundles.Add" у вашому файлі BundleConfig.cs:

BundleTable.EnableOptimizations = false;

Це дивне рішення для усунення помилок woff mime .. Ви вимкнули оптимізацію пакета.
hastrb

Я згоден з вами @hastrb, це дивно.
Луїс

0

Перейдіть за посиланням: http://fortawesome.github.io/Font-Awesome/get-started/

... використовуйте Bootstrap CDN, щоб додати Font Awesome на ваш веб-сайт за допомогою одного рядка коду. Вам навіть не потрібно нічого завантажувати чи встановлювати! "


1
Додайте пояснення також за посиланням, яким ви поділилися
Sourabh Kumar Sharma

7
CDN, як правило, корисні лише для риштування та випробування речей. При розгортанні у виробничому середовищі краще мати файли на веб-сервері АБО мати власний CDN.
Nickvda

Також це може бути не найкращою ідеєю, якщо ви створюєте додатки інтрамережі.
kosherjellyfish

0

У мене були точно такі ж проблеми та помилки. Видалення моєї бібліотеки Font-Awesome та встановлення найновішої версії подбали про проблему.


-1

Додайте .woff2 до типу mime вашого сервера додатків (наприклад, iis-> mime type) як application / font-woff

У мене це добре працювало.

Насолоджуйтесь !!!

:)

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.