Firefox에서 icoMoon 글꼴이 표시되지 않습니다.

Firefox에서 아이콘 대체 글꼴이 포함 된 교차 브라우저에 문제가 없는데 현재 icomoon 텍스트 대체가 아닌 내용 텍스트 만 표시됩니다. 소스 코드는 Sass + Magento + .htaccess 코드에서 보여지며, 어떤 아이디어 나 도움을 주시면 감사하겠습니다.Firefox에서 icoMoon 글꼴이 표시되지 않습니다.

웹 사이트

: http://www.phoebessecret.co.nz

은 htaccess로 재 작성했던 :

AddType image/svg+xml svg svgz 
AddEncoding gzip svgz 
AddType application/vnd.ms-fontobject eot 
AddType font/truetype ttf 
AddType font/opentype otf 
AddType application/x-font-woff woff 

<FilesMatch ".(ttf|otf|eot|woff)$"> 
<IfModule mod_headers.c> 
Header set Access-Control-Allow-Origin "*" 
Header set Access-Control-Allow-Origin "http://www.phoebessecret.co.nz" 
Header set Access-Control-Allow-Origin "http://skin.phoebessecret.co.nz" 
Header set Access-Control-Allow-Origin "http://js.phoebessecret.co.nz" 
Header set Access-Control-Allow-Origin "http://media.phoebessecret.co.nz" 
</IfModule> 
</FilesMatch>

CSS :

@font-face { 
font-family: 'topshops'; 
src:url('../fonts/topshops.eot'); 
src:url('../fonts/topshops.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/topshops.svg#topshops') format('svg'), 
    url('../fonts/topshops.woff') format('woff'), 
    url('../fonts/topshops.ttf') format('truetype'); 
font-weight: normal; 
font-style: normal;} 

.icon-fonts { 
    font-family: 'topshops'; 
    font-style: normal; 
    speak: none; 
    -webkit-font-smoothing: antialiased; 
    font-smoothing: antialiased; 
    text-rendering: optimizeLegibility; 
    font-weight: 400; 
} 

.iconsearch { 
    content: "\61"; 
}

출처

2012-12-02 user1869833

내가 w로 icomoon와 파이어 폭스에 문제가 있었다 엘. Paul Irish's 'bulletproof' @font-face syntax을 사용해 보셨습니까? 그것은 icomoon이 출력하는 것과는 조금 다르며 그 이후로는 FF 문제가 없습니다.

@font-face { 
    font-family: 'Graublau Web'; 
    src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype'); 
}

출처

2013-03-22 00:43:37 meaganoff

+1 내가 그들을 매우 유사 발견하고 시도 솔루션은 거의 절망적 이었지만 효과적이었습니다! – diosney

.htaccess 파일에 추가하십시오. 문제가 해결됩니다. 그것은 내 것을 고정시켰다.

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

출처

2013-08-29 09:02:05 webkub

하위 도메인에서 내 페이지를 호출 할 때 icomoon에 문제가 발생했습니다. 이 문제가 해결되었습니다. 감사. – MrUpsidown

다른 도메인의 아이콘 글꼴 파일을 호출하면이 문제가 해결됩니다. 이는 Firefox의 교차 도메인 요청 차단 구현과 관련 될 수 있습니다. –

Wordpress 설치시 동일한 문제가 발생하여 Firefox에 icomoon 아이콘이 표시되지 않았습니다. Chrome, Safari, IE는 정상적으로 작동했습니다.

사이트가 시작되고 실행 된 후 클라이언트가 http : // 대신 URL에 www를 포함 해달라고 요청했습니다. 그래서 나는 Blogress Adress를 바꾸었지만 Wordpress Dashboard에서는 Wordpress Adress가 아니다. 갑자기 모든 Icomoon 아이콘이 사라졌습니다. Wordpress 주소에 www를 추가하면 아이콘이 다시 나타납니다.

출처

2013-12-06 10:30:55 Ralf

시도 할 수있는 두 가지 사항이 있습니다. 나는 둘 다 사용했고 그것은 나를 위해 일했습니다. CSS 파일의 전체 링크를 사용하여 icomoon을 참조하십시오. .htaccess가 URL을 다시 쓰고 있습니다. 둘째로 webkub이 지적한대로 .htaccess 파일에 다음을 추가하십시오.

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

출처

2014-07-29 08:35:56

IIS를 실행하는 경우, 아래와 같이 당신이 당신의 Web.config를 수정하고 아마도 httpProtocol 섹션을 추가 할 것 :

<?xml version="1.0" encoding="utf-8"?> 
    <configuration> 
    <system.webServer> 
     <httpProtocol> 
     <customHeaders> 
      <add name="Access-Control-Allow-Origin" value="*" /> 
     </customHeaders> 
    </httpProtocol> 
    </system.webServer> 
    </configuration>

출처

2014-12-03 15:48:02 Steve

Firefox에서 icoMoon 글꼴이 표시되지 않습니다.

답변

관련 문제