developer tip

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

copycodes 2020. 8. 29. 11:24
반응형

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가 woffwoff2파일 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버튼을 두 번 클릭 합니다.

1 단계

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

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


제 경우에는 여기에서 직접 누락 된 파일을 다운로드했습니다 : 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">

I tried all the suggestions above, but my actual issue was that my application was looking for the /font folder and its contents (.woff etc) in app/fonts, but my /fonts folder was on the same level as /app. I moved /fonts under /app, and it works fine now. I hope this helps someone else roaming the web for an answer.


For me, the problem was twofold: First, the version of IIS I was dealing with didn't know about the .woff2 MIME type, only about .woff. I fixed that using IIS Manager at the server level, not at the web app level, so the setting wouldn't get overridden with each new app deployment. (Under IIS Manager, I went to MIME types, and added the missing .woff2, then updated .woff.)

Second, and more importantly, I was bundling bootstrap.css along with some other files as "~/bundles/css/site". Meanwhile, my font files were in "~/fonts". bootstrap.css looks for the glyphicon fonts in "../fonts", which translated to "~/bundles/fonts" -- wrong path.

In other words, my bundle path was one directory too deep. I renamed it to "~/bundles/siteCss", and updated all the references to it that I found in my project. Now bootstrap looked in "~/fonts" for the glyphicon files, which worked. Problem solved.

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


이 문제는 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');}

참고 URL : https://stackoverflow.com/questions/32300578/how-to-remove-error-about-glyphicons-halflings-regular-woff2-not-found

반응형