Неудобное отображение шрифтов в Chrome
Мои замечательные шрифты работают в Chrome (версия 51.0.2704.103), но не работают в Safari (версия 9.1).
При доступе к моему приложению в Chrome я получаю эту ошибку, и значки отображаются неправильно
Font from origin 'http://[::1]' has been blocked from loading by Cross-
Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header
is present on the requested resource. Origin 'http://localhost' is
therefore not allowed access.
Однако в Safari я не получаю эту ошибку, и шрифты загружаются нормально.
Я не вмешивался в код font-awesome, и версия, которую я установил с npm, - 4.6.3.
Я искал в Интернете, и люди упоминали вещи об изменении в .htaccess файл, изменяя пути шрифта в font-awesome.css файл, отключение рекламного блока и попытки обойти политику того же происхождения. Тем не менее, это не похоже на работу для меня. Меня удивляет то, что в Safari все работает правильно, но в Chrome происходит сбой? Любое понимание этого было бы полезно.
2 ответа
Попробуйте либо 2 вещи:
1. использовать этот CDN:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
2.download font-awesome.css на ваш локальный, а затем связать его оттуда, что-то вроде этого:
<link href="/my-fonts/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
Сделайте так, чтобы ваш локальный веб-сервер отправлял следующий заголовок при обслуживании шрифта
Access-Control-Allow-Origin: *
Ссылка