Шрыфт дзіўны не працуе ў Firefox

Я выкарыстоўваю самазагрузкі і я дадаў шрыфт дзіўным праз Less, перакрываючы Glyphicons. Значкі адлюстравання OK ў хром, але ў Firefox я проста бачу скрынкі.

Гэта як мой каталог выглядае

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

All I've modified in the Project > less > boostrap.less file has been:

@import "sprites.less";

//for this line

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

Як я ўжо казаў у Chrome працуе нармальна, але па нейкай прычыне Firefox паказвае толькі скрынкі.

19
Вы выдалілі @import "sprites.less"; ??
дададзена аўтар SaurabhLP, крыніца
ды, з чым сказаў @ShankarCabus. Вы хочаце, каб вывучыць, як выкарыстоўваць CORS з якой-небудзь сервер, вы працуеце з. Вы, магчыма, спатрэбіцца ўсталяваць некаторыя загалоўкі з Access-Control-Allow-Origin быць * або любы іншы дамен.
дададзена аўтар jeremywoertink, крыніца
Карыстаецеся Ці вы CDN? Паглядзіце на CORS.
дададзена аўтар Shankar Cabus, крыніца

9 адказы

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

Вы можаце выправіць гэта шляхам дадання загалоўкаў да вашай старонцы.

апаш

    
        Header set Access-Control-Allow-Origin "*"
    

Nginx

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

Credit: http://davidwalsh.name/cdn-fonts

26
дададзена
Любое рашэнне для IIS?
дададзена аўтар Phill Healey, крыніца
Я не разумею. Як адзін павінен змяніць загалоўкі ў Apache, калі файлы загружаюцца з аддаленага CDN? (Я ведаю, што OP загружаецца лакальна, але вы, здаецца, казаць аб КДС)
дададзена аўтар Jeff, крыніца
@Blackersoul: Гэта won'twork калі лакальны праект HTML падаецца праз нейкі сервер, пры HTTP://лакальнага
дададзена аўтар Shahriyar Imanov, крыніца
Гэта прасцей і хутчэй, проста усталяваўшы: «<�спасылка HREF ="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-‌ awesome.min.css «отн =" Табліца стыляў ">» Выкарыстанне вас спосаб @Dustin Brownell не працуе лакальна ў HTML праектаў.
дададзена аўтар Despertaweb, крыніца

Калі вы хочаце хуткі і лёгкі спосаб зрабіць шрыфт-застрашвалай працу, паспрабуйце выкарыстоўваць 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">
24
дададзена
Гэта павінна быць абраны адказам, так як яна працуе ў многіх іншых сітуацыях (я строй свайго сайта з Джекилом)
дададзена аўтар Heisenberg, крыніца
Premjg яна працавала выдатна для мяне - у той час як важдацца з httpd.conf не зрабіў нічога, каб вырашыць маю праблему. Гэта было сапраўды самае простае рашэнне!
дададзена аўтар Max, крыніца

Пры размяшчэнні шрыфта на S3, вы павінны ўключыць CORS на вядро. З дапамогай кансолі кіравання AWS, рэдагаваць ўласцівасці для вядра і ў раздзеле Дазволу націсніце на кнопку «Дадаць Канфігурацыю CORS». У маім выпадку, калі я пакінуў канфігурацыі па змаўчанні, ён па-ранейшаму не працуе, таму я змяніў яго:


    
        *
        GET
    

9
дададзена
ВЯЛІКІ ДЗЯКУЙ!!!
дададзена аўтар daveoncode, крыніца
Вялікі дзякуй, гэта працуе для мяне.
дададзена аўтар Javaaaa, крыніца
Вось добрая спасылка я знайшоў, як гэта зрабіць: support.cloudflare.com/hc/en-us/articles/…
дададзена аўтар campeterson, крыніца

У мяне была праблема з, калі заяву, таму што я не меў зменную $ назвай.

Але я мець аналагічныя вынікі з дапамогай:

location ~ /\.(eot|otf|ttf|woff)$ {
        add_header Access-Control-Allow-Origin *;
    }
6
дададзена
Я выкарыстоўваю Nginx 1.4, і гэта быў лепшы падыход, чым , калі інструкцыі.
дададзена аўтар Rob Di Marco, крыніца

Выкарыстанне 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 файлы з аднаго дамена.

4
дададзена
@FirstLast - Я вярнуўся праўку, так як безумоўная фарсіраванне «пратаколу htpps` не заўсёды добрая ідэя (даведацца, што" impicit URL пратаколу ").
дададзена аўтар seven-phases-max, крыніца

Калі вы падобныя на мяне, змена файла web.config з'яўляецца тое, што вы не дазваляецца чапаць.

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

@font-face{ font-family:'FontAwesome'; src:url('../_fonts/fontawesome-webfont.eot'); }
1
дададзена

Я паставіў код у .htacces


    Header set Access-Control-Allow-Origin "*"

У цяперашні час яна працуе нармальна. Дзякуючы. Дзякуем Вам за дапамогу

1
дададзена

У шрыфтах тэчкі, загрузіце наступныя файлы

FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
------------------ Important glyphicons files----------------
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

Калі ласка, загрузіце наступныя файлы і пасля гэтага вы звязаць шрыфт awesome.min.css ў файле загаловак.

Here is the following link with proper files: http://goo.gl/WICQAf

0
дададзена

Калі вы выкарыстоўваеце WordPress, і вы думаеце, што вы выпрабавалі ўсе, глядзець і бачыць, калі вы калі-небудзь усталяваны <�моцны> Шрыфт Высокі убудова. Адключыць убудова і абнаўлення ў Firefox.

Гэта было рашэннем для мяне - старая версіі плагіна з шрыфта дзіўны быў пераазначэння файлаў, якія я спрабаваў абнавіць сябе ўручную.

0
дададзена