Google 재료 아이콘(폰트)이 Mozilla Firefox에서 렌더링되지 않음

Google 재료 아이콘(폰트)이 Mozilla Firefox에서 렌더링되지 않음

현재 WAMP를 사용하여 로컬 호스트에 있는 워드프레스 프로젝트에 구글 자료 아이콘을 로컬로 추가하려고 합니다. CDN을 사용하면 모든 것이 완벽하게 작동하지만 아이콘에 대한 정적 참조를 원합니다.

여기 제 디렉토리 구조가 있습니다.

/
-index.php
-css/
----style.min.css
----MaterialIcons-Regular.eot
----MaterialIcons-Regular.ttf
----MaterialIcons-Regular.woff
----MaterialIcons-Regular.woff2

인style.min.css내가 가지고 있습니다.

.material-icons{
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';

}


@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(MaterialIcons-Regular.woff2) format('woff2'),
       url(MaterialIcons-Regular.woff) format('woff'),
       url(MaterialIcons-Regular.ttf) format('truetype');
}

본문의 아이콘을 다음과 같이 사용하는 경우:

<i class="material-icons">&#xE853;</i>

이 아이콘은 크롬에서는 잘 렌더링되지만 파이어폭스에서는 잘 렌더링되지 않습니다. FireBug에서는 이 오류가 표시됩니다.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource athttp://192.168.0.8/wp/wp-content/themes/thediode/css/MaterialIcons-Regular.woff2. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

192.168.0.8/wp이미지 및 기타 리소스를 적절하게 가져올 수 있도록 로컬 호스트의 WordPress 백엔드에 루트가 설정되어 있는데, 이것이 문제인 것 같습니다.무슨 생각 있어요? 이거 살아있을 때 먹힐까요?

FF에 있는 URL 표시줄에서 약:config로 이동합니다.보안을 찾습니다.fileuri.float_policy를 입력하고 false로 설정합니다.

오어

파일 경로 문제일 수 있습니다.슬래시 추가 시도:

 url("/MaterialIcons-Regular.woff2")

언급URL : https://stackoverflow.com/questions/33010012/google-material-icons-font-wont-render-in-mozilla-firefox