glyphicons-halflings-regular.woff2 찾을 수 없음에 대한 오류를 제거하는 방법

ASP.NET MVC4 Bootstrap 3 응용 프로그램은 Web IDE 용 Microsoft Visual Studio Express 2013에서 실행됩니다.

Chrome 콘솔에 항상 오류가 표시됨

http://localhost:52216/admin/fonts/glyphicons-halflings-regular.woff2
Failed to load resource: the server responded with a status of 404 (Not Found)

이 파일은 솔루션 탐색기의 글꼴 디렉터리에 있습니다. 빌드 동작은 "내용"으로 설정되고 출력 디렉토리에 복사는 "다른 글꼴 파일처럼 복사하지 않음"입니다. NuGet을 사용하여 부트 스트랩 3이 솔루션에 추가됩니다. 이 오류가 발생하지 않도록 수정하는 방법은 무엇입니까? 응용 프로그램은 Glyphicon 및 FontAwesome 아이콘을 올바르게 표시합니다. 이 오류는 항상 응용 프로그램 시작시 발생합니다.

이 문제는 IIS가 woff및 woff2파일 MIME 유형을 모르기 때문에 발생 합니다.

해결책 1 :

web.config 프로젝트에 다음 행을 추가하십시오.

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

해결책 2 :

IIS 프로젝트 페이지에서 :

1 단계 : 프로젝트 IIS 홈 페이지로 이동하여 MIME Types버튼을 두 번 클릭 합니다.

2 단계 : 메뉴 에서 Add버튼을 클릭 Actions합니다.

3 단계 : 화면 중앙에 창이 나타나고이 창에는 솔루션 1의 두 줄을 추가해야합니다.

제 경우에는 여기에서 직접 누락 된 파일을 다운로드했습니다 : https://gitlab.com/mailman/mailman-website/raw/a97d6b4c5b29594004e3855f1ab1222449d0c211/content/fonts/glyphicons-halflings-regular.woff2

html에만 액세스 할 수있는 경우 다음을 html에 추가하십시오.

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

나에게 문제는 두 가지였다. 첫째, 내가 다루던 IIS 버전은 .woff2MIME 유형 에 대해 몰랐고 .woff. 웹 앱 수준이 아닌 서버 수준에서 IIS 관리자를 사용하여 설정이 새 앱 배포마다 재정의되지 않도록 수정했습니다. (IIS 관리자에서 MIME 유형으로 이동하여 누락 된을 추가 .woff2한 다음 업데이트했습니다 .woff.)

둘째, 더 중요한 것은 bootstrap.css다른 파일과 함께 "~/bundles/css/site". 한편 내 글꼴 파일은 "~/fonts". bootstrap.css에서 글 리피 콘 글꼴을 찾습니다 "../fonts". 이는 "~/bundles/fonts"잘못된 경로로 번역되었습니다 .

즉, 내 번들 경로가 너무 깊은 하나의 디렉토리였습니다. 이름을으로 바꾸고 "~/bundles/siteCss"프로젝트에서 찾은 모든 참조를 업데이트했습니다. 이제 부트 스트랩 "~/fonts"이 작동하는 glyphicon 파일을 찾았습니다 . 문제 해결됨.

나는 위의 두 번째 문제를 해결하기 전에, 아무도 의 glyphicon글꼴 파일을로드하지 않았다. 증상은 glyphicon프로젝트 의 모든 글리프 인스턴스가 빈 상자를 표시한다는 것입니다. 그러나이 증상은 내 dev 컴퓨터가 아닌 웹 앱의 배포 된 버전에서만 발생했습니다. 왜 그랬는지 아직도 모르겠습니다.

위의 모든 제안을 시도했지만 실제 문제는 내 응용 프로그램이 app / fonts에서 / font 폴더와 그 내용 (.woff 등)을 찾고 있었지만 / fonts 폴더가 / app과 같은 수준에 있다는 것입니다. 나는 / fonts를 / app 아래로 옮겼고 이제 잘 작동합니다. 이것이 다른 사람이 웹을 로밍하는 데 도움이되기를 바랍니다.

이 문제는 IIS가 woff2 파일 MIME 형식 의 실제 위치 를 찾지 못하기 때문에 발생 합니다. font-face의 URL을 올바르게 설정하고 아래와 같이 CSS 파일에서 font-family를 glyphicons-halflings-regular 로 유지하십시오.

@font-face {
font-family: 'glyphicons-halflings-regular'; 
src: url('../../../fonts/glyphicons-halflings-regular.woff2') format('woff2');}