Шикарный шрифт не работает в Firefox

Я использую начальную загрузку, и я добавил удивительный шрифт через Less, переопределяя глификоны. Значки отображаются нормально в Chrome, но в Firefox я вижу только квадратики.

Вот так выглядит мой каталог

-- Project
  -- js
  -- css
  -- less
  -- font-awesome
    -- css
    -- font
    -- less

Все, что я изменил в файле Project > less > boostrap.less, это:

@import "sprites.less";

//for this line

@import "../font-awesome/less/font-awesome.less";

Как я уже сказал, в Chrome работает нормально, но Firefox почему-то показывает только ящики.


twitter-bootstrap less firefox font-awesome
person filistea    schedule 31.05.2013    source источник
comment
Вы используете CDN? Взгляните на КОРС.   -  person Shankar Cabus    schedule 01.06.2013
comment
ты удалил @import "sprites.less";??   -  person SaurabhLP    schedule 01.06.2013
comment
да, с тем, что сказал @ShankarCabus. Вы захотите изучить, как использовать CORS с любым сервером, с которым вы работаете. Возможно, вам придется установить некоторые заголовки с Access-Control-Allow-Origin как * или любой другой домен.   -  person jeremywoertink    schedule 13.06.2013

Ответы (8)


arrow_upward
28
arrow_downward

Пользовательские веб-шрифты через CDN (или любой междоменный запрос шрифта) не работают в Firefox или Internet Explorer (правильно, по спецификации), хотя они работают (неправильно так) в браузерах на базе Webkit.

Вы можете исправить это, добавив заголовки на свою страницу.

Апачи

<FilesMatch ".(eot|ttf|otf|woff)">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Nginx

if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
    add_header Access-Control-Allow-Origin *;
}

Источник: http://davidwalsh.name/cdn-fonts

person Dustin Brownell    schedule 26.06.2013
comment
Любое решение для IIS? - person Phill Healey; 04.02.2014
comment
Я не понимаю. Как изменить заголовки в Apache, если файлы загружаются с удаленного CDN? (Я знаю, что OP загружается локально, но, похоже, вы говорите о CDN) - person Jeff; 14.02.2014
comment
Проще и быстрее просто установить: ‹link href=//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css rel=stylesheet› Используя ваш метод @Dustin Brownell, это не так работает локально в html проектах. - person Despertaweb; 23.10.2014
comment
@Blackersoul: это не сработает, если локальный html-проект не будет обслуживаться через какой-то сервер под http://localhost - person Shahriyar Imanov; 27.05.2015
comment
Это так же, как комментарий выше говорит. Он не будет отображаться, если ваш проект не обслуживается через какой-либо сервер. Как только я развернул свой проект локально, значки появились так же, как и в Chrome. - person JPG; 12.09.2019

arrow_upward
24
arrow_downward

Если вам нужен быстрый и простой способ заставить Font-awesome работать, попробуйте использовать CDNJS. Это бесплатно и работает на CloudFlare. CORS поддерживается из коробки.

Попробуйте что-то вроде этого:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css">
person premjg    schedule 21.10.2013
comment
Premjg у меня отлично сработало, тогда как возня с httpd.conf не помогла решить мою проблему. Это было действительно самое простое решение! - person Max; 13.05.2014
comment
Это должен быть выбранный ответ, поскольку он работает во многих других ситуациях (я создаю свой сайт с помощью jekyll) - person Heisenberg; 02.11.2014
comment
В коммерческом проекте, для которого важна безопасность (например, веб-сайт банка), вы вообще не хотите использовать CDN, если только вы не хотите, чтобы браузер клиента отправлял реферер на сторонние веб-сайты. - person AaA; 30.09.2019

arrow_upward
10
arrow_downward

Если вы размещаете шрифт на S3, вам необходимо включить CORS в корзине. Через Консоль управления AWS отредактируйте свойства корзины и в разделе «Разрешения» нажмите «Добавить конфигурацию CORS». В моем случае, если я оставил конфигурацию по умолчанию, она все равно не работала, поэтому я изменил ее на:

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
    </CORSRule>
</CORSConfiguration>
person Ruy Diaz    schedule 08.08.2013
comment
Вот хорошая ссылка, которую я нашел о том, как это сделать: support.cloudflare.com/hc/en-us/articles/ - person campeterson; 10.01.2014

arrow_upward
6
arrow_downward

У меня возникла проблема с оператором if, потому что у меня не было переменной $filename.

Но у меня были аналогичные результаты, используя:

location ~ /\.(eot|otf|ttf|woff)$ {
        add_header Access-Control-Allow-Origin *;
    }
person fyberoptik    schedule 22.07.2013
comment
Я использую Nginx 1.4, и это лучший подход, чем оператор if. - person Rob Di Marco; 13.01.2014

arrow_upward
4
arrow_downward

Использование CDN, предложенное premjg, является наименее инвазивным методом, помимо его самостоятельного размещения. Последняя версия fontawesome предлагает bootstrapcdn, например,

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Небольшое примечание: noscript молча блокирует запросы к CDN, если они не включены в белый список, и он не предложит вам добавить CDN в белый список, если ваша страница также не запрашивает файлы JS из того же домена.

person A Lee    schedule 23.05.2014
comment
@FirstLast - я отменил ваше редактирование, поскольку безусловное принудительное использование протокола «htpps» не всегда является хорошей идеей (узнайте, что такое неявный URL-адрес протокола). - person seven-phases-max; 22.10.2017

arrow_upward
1
arrow_downward

Если вы похожи на меня, изменение файла web.config — это то, к чему вам не разрешено прикасаться.

Попробуйте хранить все файлы шрифтов (.eot, .ttf и т. д.) в их собственной локальной папке и ссылаться на них локально, а не на CDN FontAwesome. Каждый раз очищал его в IE и FF для меня.

@font-face{ font-family:'FontAwesome'; src:url('../_fonts/fontawesome-webfont.eot'); }
person OneMohrTime    schedule 05.08.2013

arrow_upward
0
arrow_downward

Если вы используете wordpress и думаете, что перепробовали все, проверьте, устанавливали ли вы когда-нибудь плагин Font Awesome. Отключите плагин и обновите Firefox.

Это было решением для меня - старая версия плагина font-awesome переопределяла файлы, которые я пытался обновить вручную.

person bkbeachlabs    schedule 11.08.2014

arrow_upward
0
arrow_downward

В папку со шрифтами загрузите следующие файлы

FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
---- ----------------------------- Важные файлы глификонов----------------
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

Пожалуйста, загрузите следующие файлы, и после этого вы свяжете свой font-awesome.min.css в файле заголовка.

Вот следующая ссылка с соответствующими файлами: http://goo.gl/WICQAf

person Subhojit Mondal    schedule 01.05.2015