developer tip

글꼴에 대한 Font-Awesome 오류 404

optionbox 2020. 11. 19. 08:05
반응형

글꼴에 대한 Font-Awesome 오류 404


무슨 일이 일어나고 있는지 모르겠지만 브라우저 콘솔에서 font-awesome과 관련된 3 가지 오류를 볼 수 있습니다.

 GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff2?v=4.3.0 
 GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff?v=4.3.0
 GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.ttf?v=4.3.0 

나는 이것을 스스로 알아낼 수 없다는 것이 어리 석다는 것을 알고 있지만 모든 것이 정상인 것 같습니다. index.html에서 나는 이와 같은 것을 가지고 있습니다.

<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />

그게 제가 글꼴과 관련된 모든 것입니다. 저는 이미 경로를 확인했고 그게 잘못이 아닙니다.

너희들 중에 이런 일이 일어나고 있는가?

여기에 이미지 설명 입력

최신 정보

이것은 헤더에 일부 콘텐츠를로드하는 NGINX 부분입니다.

add_header Content-Security-Policy "style-src 'self' 'unsafe-inline'
https://fonts.googleapis.com
https://fonts.gstatic.com
https://themes.googleusercontent.com
https://assets.zendesk.com;
font-src 'self' https://themes.googleusercontent.com
https://fonts.gstatic.com;";

.woff를 응용 프로그램 서버 MIME 유형 (예 : iis-> MIME 유형)에 application / font-woff로 추가합니다.


더 좋은 방법은이 섹션을 web.config에 추가하는 것입니다. 그러면 해당 MIME 유형이 배포하는 모든 서버의 IIS에 자동으로 추가됩니다. (제거는 이미 존재하는 경우 중복 MIME 유형 오류를 방지하는 것입니다)

  <system.webServer>
    <staticContent>
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="font/x-woff" />
    </staticContent>  
  </system.webServer>

나는 iis와 같은 문제가 있었다. 파일 확장자가 ".woff2"이고 mime 유형이 "font / x-woff"인 새 MIME 유형을 추가하여 문제가 해결되었습니다.


1. IIS로 이동하여 웹 사이트를 찾고 MIME 유형을 찾은 다음 추가를 클릭하십시오.

2. 첨부 파일명에 "woff2"입력 Mime 타입에 "application / font-woff"입력

3. IIS에서 웹 사이트 다시 시작


제공 한 URL이 모두 유효하지 않으며 리소스에 연결되지 않습니다. 우리 중 누구라도 귀하의 게시물에서 알 수있는 한-그들은 단순히 존재하지 않습니다.

의도 한 폴더 구조에 맞게 파일을 올바로 업로드 했습니까?


Apache2 웹 서버 만 허용하는 "cPanel 공유 호스트 서버"에서 똑같은 문제가 발생했습니다. 'Access-Control-Allow-Origin'값의 와일드 카드 (*)는 공유 호스트 보안 설정에서 허용되지 않기 때문에 (대역폭 및 리소스 도둑 때문에) 작동하도록 다른 방법을 찾아야했습니다.

OP가 묻는이 질문은 nginx를 추론하지만 수락되고 가장 많이 찬성되는 답변은 IIS에 대한 것 같습니다. Apache의 CORS "권한"과 관련된 apache2 솔루션을 찾고있는이 질문을 우연히 발견 한 사람들 (나와 같은)이있을 수 있습니다.이 문제를 해결하기위한 마법의 총알이 여기에 있습니다. .htaccess 파일의 WP 사이트 루트 디렉토리의 tippy-top에 다음을 추가했습니다.

<IfModule mod_headers.c>
 <IfModule mod_rewrite.c>
    SetEnvIf Origin "http(s)?://(.+\.)?(othersite\.com|mywebsite\.com)(:\d{1,5})?$" CORS=$0
    Header set Access-Control-Allow-Origin "%{CORS}e" env=CORS
    Header merge  Vary "Origin"
 </IfModule>
</IfModule>

I wish I could take credit for this fantastic hunk of RegEX magic, but I explain how I derived this solution in this post comment to a similar question here: Access-Control-Allow-Origin wildcard subdomains, ports and protocols

** Obvious NOTE: You need to change the domain name to match your own. You can remove the (|) RegEx OR and just use a single domain name in which ALL subdomains AND the root level domain name are accepted by the RegEx


Go to: http://fortawesome.github.io/Font-Awesome/get-started/

...use Bootstrap CDN to add Font Awesome into your website with a single line of code. You don't even have to download or install anything!"


나는 똑같은 문제와 오류가 있었다. 내 Font-Awesome 라이브러리를 삭제하고 최신 버전을 설치하면 문제가 해결되었습니다.


위의 솔루션 중 어느 것도 다음을 제외하고는 나를 위해 일하지 않았습니다. BundleConfig.cs 파일의 모든 'bundles.Add'명령 뒤에 다음 행을 추가하십시오.

BundleTable.EnableOptimizations = false;

.woff2를 애플리케이션 서버 mime 유형 (예 : iis-> mime 유형)에 application / font-woff로 추가합니다.

그것은 나를 위해 잘 작동했습니다.

즐겨 !!!

:)

참고 URL : https://stackoverflow.com/questions/29312063/font-awesome-error-404-on-fonts

반응형