Firefox는 Font Awesome webfont set의 아이콘을 렌더링 할 수 없습니다

Firefox (Windows 7)에서는 Font Awesome 패키지 에서 호출 된 아이콘 및 글리프가 제대로 렌더링되지 않습니다. 이에 대한 예는 Khan Academy 웹 사이트에서 볼 수 있습니다. 비디오 아래에서 아이콘은 16 진 코드가있는 상자로 표시됩니다. 이것은 Firefox에 의해 다운로드되지 않음을 의미합니다.

Chrome (Windows 7), Safari (Mac OS X) 및 Stainless (Mac OS X)에 표시되는 방법 :

CSS가 글꼴의 src 위치를 묶기 위해 작은 따옴표를 사용하는 이유를 설명 할 수있는 Stack Overflow 에서이 질문을 발견 했습니다 . 그러나 Khan Academy 서버에 대한 쓰기 권한이 없으므로 실제 웹 사이트를 수정할 수 없습니다. Firefox 에서이 문제를 해결할 수 있는지 여부와 방법을 알고 싶습니다. 도움이된다면 Greasemonkey 스크립트를 실행할 수 있습니다. 이미 수동으로 글꼴을 다운로드하여 Windows의 Fonts 폴더에 추가하려고 시도했지만 도움이되지 않습니다.

참고로이 글꼴을 설정하는 CSS (Firefox에서 올바르게 처리되지 않음)는 다음과 같습니다.

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

[class^="icon-"]:before,
[class*=" icon-"]:before
{
  font-family:FontAwesome;
  font-weight:normal;
  font-style:normal;
  display:inline-block;
  text-decoration:inherit
}

업데이트 : Firefox가 Font Awesome 패키지의 웹 사이트 (위에 링크)에서 글꼴 기반 아이콘을 올바르게 표시한다는 것을 알았습니다. CSS를 검사하고 Khan Academy의 CSS와 비교할 때 KA의 CSS에 대한 마지막 속성 뒤에 세미콜론이 없다는 것을 제외하고 두 코드가 정확히 동일하다는 것을 알았 습니다 (압축 사실을 무시하면). 세미콜론이 부족하면이 문제가 발생합니까?

이 질문에 설명 된 문제는 Khan Academy에서 모든 경로를 ./에서 /fonts/(예 :로 ./fontawesome-webfont.ttf변경 /fonts/fontawesome-webfont.ttf) 변경하여 수정되었습니다 . Firefox가 특수 "도트"디렉토리 (현재 디렉토리를 참조 함)에서 파일을 읽을 수없는 것 같습니다.

추신 : 마지막 속성 이후 CSS에 세미콜론이 없어도이 문제가 발생 하지 않습니다 .

추가 댓글:

.접두사 에 대한 편집은 Firefox가 파일을 처리하는 방식이 아니라 서버 문제입니다. KA가 잘못된 위치에서 글꼴 파일을 참조하고있었습니다 – 무작위

잘못되었습니다! 오래 전에 이미 언급했듯이 세 개의 다른 브라우저에서 글꼴이 올바르게 작동했습니다. 이는 글꼴이 올바른 위치에 있었음을 의미합니다. ./필자가 설명한대로 경로 에 대한 Firefox의 문제 였기 때문에 KA가 글꼴 파일을 필요없는 새로운 위치로 이동 ./시켜 Firefox가 글꼴 파일을 올바르게 읽을 수있게했습니다. 따라서 그것은 이다 파이어 폭스는 파일을 처리하는 방법의 문제는.

아마하지 제기 된 질문에 대한 대답은하지만, 관련 충분 스크린 샷에서와 같이 동일한 결과를 생성하는 약간 다른 문제를 여기까지 사람을 도움이됩니다.

Firefox는 다른 (하위) 도메인에있는 글꼴 사용을 차단합니다

또한 해당 게시물에 대한 의견을 읽고 좋은 조언을 제공합니다.

다음과 같이 IE, Firefox 및 Chrome을 올바르게 실행하기 위해 경로를 변경했습니다. ( URL to see )

@font-face{
  font-family:'FontAwesome';
  src:url('ogi/bete/font/fontawesome-webfont.eot?v=3.0.1');
  src:url('/ogi/bete/font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'), 
  url('/ogi/bete/font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
  url('ogi/bete/font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight:normal;
  font-style:normal }