@font-face가 woff 파일에 404 오류를 던지는 이유는 무엇입니까?

@font-face가 woff 파일에 404 오류를 던지는 이유는 무엇입니까?

는 중용사를 합니다.@font-face우리 회사 사이트에서 아주 잘 작동합니다.파이어폭스와 크롬이 404 오류를 발생시키는 것을 제외하고는.woffIE에서 오류를 발생시키지 않습니다.저는 루트에 있는 글꼴을 가지고 있지만, CSS 폴더에 있는 글꼴로 시도해 보았고 글꼴 전체 URL도 제공했습니다.제 css 파일에서 해당 글꼴을 제거하면 404가 표시되지 않으므로 구문 오류가 아니라는 것을 알 수 있습니다.

폰트 하여 또한글다도사용여하를구쥐람꼴▁the를 만들었습니다.@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 애플리케이션/x-woff "

업데이트: WOFF 글꼴 및 Grsm에 대한 MIME 유형에 따라 실제 MIME 유형은 다음과 같습니다. application/x-font-woff(최소한 Chrome의 경우). x-woff는 Chrome 404s를 수정하고 x-font-woff는 Chrome 경고를 수정합니다.

2017년 기준: Woff 글꼴은 현재 RFC8081 사양의 일부로 마임 유형으로 표준화되었습니다.font/woff그리고.font/woff2.

셉 듀건 덕분에: 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 >Errors.type > Chrome > Developer Tools에서 를 주고 있었습니다.

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 Robinson 답변은 잘 작동하지만 Chrome은 "리소스가 글꼴로 해석되지만 MIME 유형 응용 프로그램/x-off로 전송됨"이라는 메시지로 계속 불만을 제기할 것입니다.

만약 당신이 그것을 얻는다면, 당신은 바꿀 수 있습니다.

응용 프로그램/x-off

로.

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

그리고 당신은 더 이상 크롬 콘솔 오류가 없을 것입니다!

(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 Server Manager(실행 명령: inetmgr)를 실행하고 MIME 유형을 열고 다음을 추가합니다.

파일 이름 확장명: .woff

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

권한, MIME 유형 등과 관련하여 많은 시도를 했지만, 결국 웹.config가 IIS에서 정적 파일 처리기를 제거한 다음 정적 파일이 있는 디렉터리에 대해 명시적으로 다시 추가했습니다.디렉터리에 위치 노드를 추가하고 핸들러를 다시 추가하자마자 요청이 404s를 받지 못했습니다.

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초로 여러 번 걸려 넘어졌어요글꼴 폴더 권한이 올바르게 설정되어 있는지 확인합니다.

또한 URL 다시 작성기를 확인합니다.만약 "이상한" 것이 발견된다면 그것은 404개를 던질 수도 있습니다.

웹 서버 구성에 액세스할 수 없는 경우에는 글꼴 파일이 svg로 끝나도록 이름만 바꿀 수도 있습니다(형식은 그대로 유지).크롬과 파이어폭스에서 잘 작동합니다.

MIME 유형을 추가한 후에도 여전히 작동하지 않는 경우, 사이트의 인증확인 섹션에서 "익명 인증확인"이 사용 가능한지 확인하고 지정된 스크린샷에 따라 "응용프로그램 풀 ID"를 선택해야 합니다.

IIS Mime 유형: .woff 글꼴/x-woff(application/x-woff 또는 application/x-font-woff 제외)

해결:

나는 모불릿 프로퍼 방법을 사용해야 했습니다.

언급URL : https://stackoverflow.com/questions/4015816/why-is-font-face-throwing-a-404-error-on-woff-files