다운로드 한 글꼴을 해독하지 못했습니다. OTS 구문 분석 오류 : 잘못된 버전 태그 + 레일 4

자산을 사전 컴파일하고 프로덕션 모드에서 응용 프로그램을 실행하고 있습니다. 색인 페이지를로드 할 때 컴파일 후 크롬 콘솔에 다음과 같은 경고가 표시됩니다.

Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.ttf?v=2.0.0
prospects:1 OTS parsing error: invalid version tag
Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.woff?v=2.0.0
prospects:1 OTS parsing error: invalid version tag

문제는 사각형을 표시하는 대신 아이콘을로드하지 않는 것입니다 .

우리는 사용자 정의 글꼴을 사용했으며 코드는 다음과 같습니다.

@font-face {
  font-family: 'icomoon';
  src: font-url('icomoon.eot');
  src: font-url('icomoon.eot?#iefix') format('embedded-opentype'),
       font-url('icomoon.ttf') format('truetype'),
       font-url('icomoon.woff') format('woff'),
       font-url('icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

나는 내 끝에서 무엇이 빠졌는지 모른다. 나는 많은 것을 검색하고 해결책을 시도했지만 성공하지 못했습니다. 개발 모드에서는 제대로 작동하지만 프로덕션 모드에서 왜 사각형을 보이는지 모르겠습니다.

나는 똑같은 오류를 겪었고, 제 경우에는 @font-face선언 경로가 잘못 되었기 때문입니다 . 우리가 사용하는 dev 서버 (live-server)가 404 : s에서 기본 index.html을 제공하도록 구성되었으므로 웹 관리자는 404에 대해 불평하지 않았습니다. 설정에 대한 세부 사항을 알지 못하면 이는 범인 일 수 있습니다.

IIS를 서버 및 .net 4 / 4.5로 실행하는 경우 Web.config에서 MIME / 파일 확장자 정의가 누락 될 수 있습니다.

<system.webServer>
	<staticContent>
      <remove fileExtension=".eot" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <remove fileExtension=".ttf" />
      <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
      <remove fileExtension=".svg" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
    </staticContent>
</system.webServer>

나는 같은 문제를 겪고 있었다., OTS parsing error: Failed to convert WOFF 2.0 font to SFNT (index):1 Failed to decode downloaded font: http://dev.xyz/themes/custom/xyz_theme/fonts/xyz_rock/rocksansbold/Rock-SansBold.woff2

글꼴을 커밋하려고 시도하는 동안이 오류 메시지가 표시되면 .gitattributes " warning: CRLF will be replaced by LF" 관련 문제입니다.

해결책은 .gitattributes에서 문제가되는 글꼴을 추가하는 것입니다.

*.ttf     -text diff
*.eot     -text diff
*.woff    -text diff
*.woff2   -text diff

그런 다음 손상된 글꼴 파일을 삭제하고 새 글꼴 파일을 다시 적용하여 잘 작동합니다.

시험

@font-face {
  font-family: 'icomoon';
  src: asset-url('icomoon.eot');
  src: asset-url('icomoon.eot?#iefix') format('embedded-opentype'),
       asset-url('icomoon.ttf') format('truetype'),
       asset-url('icomoon.woff') format('woff'),
       asset-url('icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

파일 이름을 application.css.scss

글꼴이 손상되었지만 문제없이로드되는 것처럼 보였고 Chrome의 소스 아래에 devtools가 표시되는 것처럼 보였으므로 바이트 수가 정확하지 않아 다시 다운로드하여 해결했습니다.

@ font-face에서 다음과 같이 형식을 지정하십시오.

@font-face {
  font-family: 'Some Family';
  src: url('/fonts/fontname.ttf') format('ttf'); /* and this for every font */
}

나는 같은 문제를 겪었고 그것은 파일로 텍스트를 처리하는 자식 때문입니다. 따라서 빌드 에이전트에서 파일을 체크 아웃하는 동안 바이너리는 유지되지 않았습니다.

이것을 .gitattributes파일에 추가 하고 시도하십시오.

*.eot binary
*.ttf binary
*.woff binary
*.woff2 binary

를 사용할 때 angular-cli이것이 나에게 효과적입니다.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <remove fileExtension=".eot" />
            <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
            <remove fileExtension=".ttf" />
            <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
            <remove fileExtension=".svg" />
            <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
            <remove fileExtension=".woff" />
            <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
            <remove fileExtension=".woff2" />
            <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
            <remove fileExtension=".json" />
            <mimeMap fileExtension=".json" mimeType="application/json" />
        </staticContent>
        <rewrite>
            <rules>
                <rule name="AngularJS" stopProcessing="true">
                    <match url="^(?!.*(.bundle.js|.bundle.js.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.chunk.js|.chunk.js.map|.png|.jpg|.ico|.eot|.svg|.woff|.woff2|.ttf|.html)).*$" />
                    <conditions logicalGrouping="MatchAll">
                    </conditions>
                    <action type="Rewrite" url="/"  appendQueryString="true" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

다음과 같은 오류가 발생했습니다.

Failed to decode downloaded font: [...]/fonts/glyphicons-halflings-regular.woff2
OTS parsing error: invalid version tag

https://github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-regular.woff2 에서 원시 파일을 직접 다운로드 한 후 수정되었습니다.

문제는 파일을 다운로드 할 때 프록시 오류가 발생했다는 것입니다 (HTML 오류 메시지가 포함되어 있음).

GitHub의 아래 주소로 이동하여 각 FontAwesome 파일을 다운로드하십시오.

https://github.com/FortAwesome/font-awesome-sass/tree/master/assets/fonts/font-awesome

...하지만 링크를 마우스 오른쪽 버튼으로 클릭하고 다른 이름으로 저장하는 대신 각 파일을 클릭하고 '다운로드'버튼을 사용하여 저장하십시오.

링크를 저장하면 FontAwesome 파일 바이너리 자체가 아닌 HTML 페이지를 다운로드 한 것으로 나타났습니다.

일단 모든 바이너리가 있으면 그것은 나를 위해 일했습니다.

내 문제는 내가 두 개의 글꼴을 선언하고 있었고 scss는 글꼴의 이름을 선언 할 것으로 예상됩니다.

@font-face{} 당신이 선언 한 후에 $my-font: "OpenSans3.0 or whatever";

그리고 이것은 각각의 폰트 페이스 마다 적용 됩니다.

:-)

들어 각-CLI 및 웹팩 사용자 나, CSS 파일에서 글꼴을 가져 오기 때문에 또한 URL 위치는 다음과 같이 작은 따옴표로 인코딩주십시오 동안 몇 가지 문제가 있다고 의심 -

@font-face {
font-family: 'some_family';
src: url('./assets/fonts/folder/some_family-regular-webfont.woff2') format('woff2'),
     url('./assets/fonts/folder/some_family-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

이 게시물은 오래되었지만이 방법이 저에게 효과적이었습니다.

나는 같은 문제가 있었다.

글꼴 버전에 글꼴 버전 (예 ?v=1.101:)을 추가하면 트릭을 수행해야합니다.)

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/open-sans-v15-latin-600.eot?v=1.101'); /* IE9 Compat Modes */
    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
    url('../fonts/open-sans-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/open-sans-v15-latin-600.woff2?v=1.101') format('woff2'), /* Super Modern Browsers */
    url('../fonts/open-sans-v15-latin-600.woff?v=1.101') format('woff'), /* Modern Browsers */
    url('../fonts/open-sans-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/open-sans-v15-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}

글꼴의 TTF 버전을 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴에서 "정보 입수"(Mac OSX) "속성"(Windows)을 선택하면 글꼴 버전에 액세스하기에 충분해야합니다.

Chrome을 사용하는 경우 아래와 같이 글꼴의 개방형 (OTF) 버전을 추가해보십시오.

    ...
     url('icomoon.otf') format('opentype'),
    ...

건배!

부트 스트랩을 사용하는 경우 부트 스트랩 css ( bootstrap.min.css) 파일 및 글꼴 파일 을 업데이트 하십시오. 이 솔루션으로 문제를 해결했습니다.

IIS에서 ASP.NET을 사용하고 있으며 IIS에 MIME 유형을 추가해야했습니다. '.woff2'/ 'application / font-woff'

다른 많은 접근 방식과 많은 다시 설치 및 확인을 시도한 후 Chrome에서 캐시 된 데이터 (캐시 된 이미지 및 파일)를 지우고 페이지를 새로 고침하여 문제를 해결했습니다.

내가 열고 저장했을 때 같은 문제가 발생했습니다 .woff. 옵션이있는 woff2숭고한 텍스트를 통한 파일 . Sublime에서 파일을 열지 않고 글꼴 폴더에 파일을 복사했는데 문제가 해결되었습니다.EditorConfigend_of_line = lf

다른 답변이 작동하지 않으면 다음을 시도하십시오.

1. .htaccess 파일 확인

   # Fonts
# Add correct content-type for fonts
   

   AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType application/x-font-woff2 .woff2
AddType image/svg+xml .svg
   

2. 서버 캐시 지우기

3. 브라우저 캐시 지우기 및 새로 고침

글꼴의 CSS 파일을 확인하십시오 . (fontawesome.css / fontawesome.min.css) , 다음과 같이 보일 것입니다 :

@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot-v=4.6.3.htm');
    src: url('../fonts/fontawesome-webfont.eot#iefix-v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2-v=4.6.3.htm') format('woff2'), url('../fonts/fontawesome-webfont.woff-v=4.6.3.htm') format('woff'), url('../fonts/fontawesome-webfont.ttf-v=4.6.3.htm') format('truetype'), url('../fonts/fontawesome-webfont.svg-v=4.6.3.htm#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal
}

글꼴의 파일 확장자 이름 뒤에 버전 태그 가 표시됩니다 . 처럼:

-v = 4.6.3

CSS 파일에서이 태그를 제거하면됩니다. 이것을 제거한 후에는 fonts 폴더로 가야합니다.

그리고이 글꼴 파일을 만들 려면 파일 이름에서 버전 태그 -v = 4.6.3을 제거하면됩니다.

그런 다음 문제가 해결됩니다.

누군가에게 관련이있는 경우를 대비하여. Visual Studio에서 ASP.NET 및 C #을 사용하는 것과 동일한 오류가 발생했습니다. Visual Studio에서 앱을 시작했을 때 작동했지만이 문제가 발생했습니다. 그동안 프로젝트의 경로에 문자 "#"(c : \ C # \ testapplication)가 포함되어있는 것으로 나타났습니다. 이것은 IIS Express (IIS 일 수도 있음)를 혼동하는 것으로 보이며이 문제를 일으 킵니다. "#"은 ASP.NET 이하의 예약 문자라고 생각합니다. 경로를 변경하면 도움이되었고 이제는 예상대로 작동합니다.

Christof 감사합니다

내가 도움이 된 것은 주문을 변경했다는 것입니다. .eot가 먼저로드되지만 내 오류는 .eot를로드하는 중이었습니다. 그래서 woff2의 첫 번째 src로 .eot를 버리고 오류가 사라졌습니다.

따라서 코드는 다음과 같습니다.

@font-face {
  font-family: 'icomoon';
  src:  url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2');
  src:  url('assets/fonts/icomoon.eot?9h1pxj#iefix') format('embedded-opentype'),
    url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2'),
    url('assets/fonts/icomoon.ttf?9h1pxj') format('truetype'),
    url('assets/fonts/icomoon.woff?9h1pxj') format('woff'),
    url('assets/fonts/icomoon.svg?9h1pxj#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

그리고 있었다 :

@font-face {
  font-family: 'icomoon';
  src:  url('assets/fonts/icomoon.eot?9h1pxj');
  src:  url('assets/fonts/icomoon.eot?9h1pxj#iefix') format('embedded-opentype'),
    url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2'),
    url('assets/fonts/icomoon.ttf?9h1pxj') format('truetype'),
    url('assets/fonts/icomoon.woff?9h1pxj') format('woff'),
    url('assets/fonts/icomoon.svg?9h1pxj#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

For it is fixed by using below statement in app.web.scss
    $fa-font-path:   "../../node_modules/font-awesome/fonts/" !default;
    @import "../../node_modules/font-awesome/scss/font-awesome";

나는 같은 문제를 겪고 있었고, 이것은 나를 위해 일했다 https://github.com/webpack/webpack/issues/1468