내가 사용하고 @font-face내 회사의 사이트에 그것은 큰 / 외모를 작동합니다. Firefox와 Chrome을 제외하고 .woff파일 에서 404 오류가 발생 합니다. IE는 오류를 발생시키지 않습니다. 루트에 글꼴이 있지만 CSS 폴더의 글꼴로 시도하고 글꼴의 전체 URL을 제공했습니다. 내 CSS 파일에서 해당 글꼴을 제거하면 404가 없으므로 구문 오류가 아닙니다.

또한 fontsquirrels 도구를 사용하여 @font-face글꼴과 코드 를 작성했습니다 .

@font-face {
  font-family: 'LaurenCBrownRegular';
  src: url('/laurencb-webfont.eot');
  src: local('☺'), 
    url('/laurencb-webfont.woff') format('woff'), 
    url('/laurencb-webfont.ttf') format('truetype'), 
    url('/laurencb-webfont.svg#webfontaaFhOfws') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FontinSansRegular';
  src: url('/fontin_sans_r_45b-webfont.eot');
  src: local('☺'), 
    url('/fontin_sans_r_45b-webfont.woff') format('woff'), 
    url('/fontin_sans_r_45b-webfont.ttf') format('truetype'), 
    url('/fontin_sans_r_45b-webfont.svg#webfontKJHTwWCi') format('svg');
  font-weight: normal;
  font-style: normal;
}

Chrome에서 woff 파일에 404와 동일한 증상이 발생했으며 IIS 6이 설치된 Windows Server에서 응용 프로그램을 실행 중이었습니다.

동일한 상황에있는 경우 다음을 수행하여 해결할 수 있습니다.

해결책 1

"IIS 관리자 (웹 사이트 속성의 HTTP 헤더 탭)를 통해 다음 MIME 형식 선언을 추가하기 만하면됩니다. .woff application / x-woff "

업데이트 : 에 따라 WOFF 폰트에 대한 MIME 유형 및 Grsmto 실제 MIME 타입이다 (적어도 크롬) 응용 프로그램 / X-글꼴 WOFF. x-woff는 Chrome 404를 수정하고 x-font-woff는 Chrome 경고를 수정합니다.

2017 년 기준 : Woff 글꼴은 이제 RFC8081 사양의 일부로 MIME 유형 font/woff및 으로 표준화되었습니다 font/woff2.

Seb Duggan 덕분에 : http://sebduggan.com/posts/serving-web-fonts-from-iis

해결책 2

웹 설정 에서 MIME 유형을 추가 할 수도 있습니다 .

  <system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
      <mimeMap fileExtension=".woff" mimeType="font/woff" />
    </staticContent>    
  </system.webServer>

이 게시물에 대한 답변은 매우 도움이되었으며 시간을 크게 절약했습니다. 그러나을 사용할 때 아래에 표시된 것처럼 확장 유형에 FontAwesome 4.50대한 추가 구성을 추가해야한다는 것을 알았습니다. woff2그렇지 않으면 woff2유형 요청 이 Chrome의 개발자 도구에서 콘솔> 오류에 404 오류가 발생했습니다.

S.Serp의 의견에 따르면 아래 구성은 <system.webServer>태그 안에 있어야합니다 .

<staticContent>
  <remove fileExtension=".woff" />
  <!-- In case IIS already has this mime type -->
  <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
  <remove fileExtension=".woff2" />
  <!-- In case IIS already has this mime type -->
  <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" />
</staticContent>

실제로 @Ian 로빈슨의 대답은 잘 작동하지만 크롬은 그 메시지와 함께 불평을 계속 : " 자원 글꼴로 해석하지만, MIME 유형 application / x-WOFF로 전송 "

당신이 그것을 얻는다면, 당신은에서 변경할 수 있습니다

응용 프로그램 / x-woff

에

응용 프로그램 / x -font -woff

더 이상 Chrome 콘솔 오류가 없습니다!

(Chrome 17에서 테스트)

IIS7 솔루션

나는 또한 같은 문제를 겪었다. 모든 웹 사이트에 적용되므로 서버 수준 에서이 구성을 수행하는 것이 좋습니다.

1. IIS 루트 노드로 이동 하여 "MIME 유형"구성 옵션을 두 번 클릭하십시오.

2. 오른쪽 상단의 액션 패널에서 "추가"링크를 클릭하십시오.

3. 대화 상자가 나타납니다. .woff 파일 확장자를 추가하고 "application / x-font-woff"를 해당 MIME 유형으로 지정하십시오.

.woff 파일 이름 확장자를위한 MIME 유형 추가

다음은 IIS 7의 문제를 해결하기 위해 수행 한 작업입니다.

Ian의 답변 외에도 요청 필터링 모듈의 글꼴 확장이 작동하도록 허용해야했습니다.

<system.webServer>
  <staticContent>
    <remove fileExtension=".woff" />
    <remove fileExtension=".woff2" />
    <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
    <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" />
  </staticContent>
  <security>
      <requestFiltering>
          <fileExtensions>
              <add fileExtension=".woff" allowed="true" />
              <add fileExtension=".ttf" allowed="true" />
              <add fileExtension=".woff2" allowed="true" />
          </fileExtensions>
      </requestFiltering>
  </security>    
</system.webServer>

IIS 서버 관리자 실행 (run 명령 : inetmgr) Mime 유형을 열고 다음을 추가하십시오.

파일 이름 확장자 : .woff

MIME 유형 : 응용 프로그램 / 옥텟 스트림

권한, MIME 유형 등을 둘러싼 많은 것들을 시도했지만 결국 web.config가 IIS에서 정적 파일 처리기를 제거한 다음 정적 파일이있는 디렉토리에 대해 다시 명시 적으로 추가했습니다. 디렉토리에 위치 노드를 추가하고 핸들러를 다시 추가하자마자 요청에 404가 표시되지 않습니다.

IIS7에서 CodeIgniter를 사용하는 경우 :

web.config 파일 에서 패턴 에 woff 를 추가하십시오.

<rule name="Rewrite CI Index">
  <match url=".*" />
    <conditions>
      <add input="{REQUEST_FILENAME}" pattern="css|js|jpg|jpeg|png|gif|ico|htm|html|woff" negate="true" />
    </conditions>
    <action type="Rewrite" url="index.php/{R:0}" />
 </rule>

그것이 도움이되기를 바랍니다!

이것은 명백 할 수도 있지만 404 번으로 여러 번 나에게 트립되었습니다 ... fonts 폴더 권한이 올바르게 설정되어 있는지 확인하십시오.

또한 URL 재 작성기를 확인하십시오. "이상한"것이 발견되면 404를 던질 수 있습니다.

웹 서버 구성에 액세스 할 수없는 경우 글꼴 파일의 이름을 svg로 끝내도록 형식을 바꿀 수도 있습니다 (그러나 형식은 유지). Chrome 및 Firefox에서 제대로 작동합니다.

MIME 유형을 추가 한 후에도 여전히 작동하지 않으면 사이트의 인증 섹션에서 "익명 인증"이 활성화되어 있는지 확인하고 지정된 스크린 샷에 따라 "응용 프로그램 풀 ID"를 선택하십시오.

IIS Mime 유형 : .woff font / x-woff (application / x-woff 또는 application / x-font-woff 아님)

그것을 해결 :

Mo'Bulletproofer 방법 을 사용해야 했습니다