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


136

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

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;
}

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


2
문자 인코딩이 잘못되었거나 글꼴 자체가 손상되었을 수 있습니다. 서체 등에서 서체를 열 수 있습니까? 빠른 Google의 Chromium 브라우저 버전 45 버그 : code.google.com/p/chromium/issues/detail?id=545924
Craig

문제를 해결할 수 있었습니까?
코더

1
필자의 경우 cloudflare 캐시를 제거하고 몇 분 동안 기다려야 문제가 해결됩니다!
HoseinGhanbari

나는 같은 문제가 있었고 크롬에 ​​대한 woff 전에 woff2 글꼴이 필요하다는 것을 알았습니다.
jcubic

답변:


138

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


1
이것이 경로 재 지정의 이유 인 경우 파일 확장자 RewriteRule! \. (js | gif | css | jpg | otf | eot | png) $ / redirect [R = 301, L]
필터링 할 수 있습니다.

필자의 경우 ASP.NET MVC 번들링 및 축소는 본질적으로 상대 경로를 변경하지 않고 CSS의 위치를 ​​변경했습니다. 이미 축소 된 파일을 삭제하고 CssRewriteUrlTransformBundleConfig에서 사용했습니다 .
Sinjai

22

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>


16

나는 같은 문제를 겪고 있었다., 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

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


그 파일은 어디에 있습니까? 브라우저가 존재한다는 것을 알 수 있습니까? 어떻게?
Omar

@Omar 해당 파일은 루트 디렉토리에 있어야하며 브라우저와 관련이 없습니다. git이 다른 파일 형식으로 줄 끝을 관리하는 방법을 설명합니다. 힘내 줄 끝을 변경하여 일부 파일 형식을 손상시킬 수 있습니다.
elliottregan

5

시험

@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


4

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


woff2를 사용하는 경우 온라인 변환기를 사용한 후이 문제가 발생했습니다. 명령 행 woff2 변환기 (homebrew를 통해 사용 가능) 를 사용해야 함
rob-gordon

4

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

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


3

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

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

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

2

를 사용할 때 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>

어떤 파일을 추가해야하는지 말할 수 있다면 좋을까요?
Saiyaff Farouk

1
web.config 편집
Skorunka František

angular-cli 프로젝트에 web.config 파일을 제출할 수 없습니다. 버전 1.3.0 사용 실마리?
Saiyaff Farouk

Web.config는 IIS에서 클라이언트 앱을 호스팅 할 때만 사용됩니다 (Azure Web Services 포함).
Skorunka František

2

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

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 오류 메시지가 포함되어 있음).


파일 자체를 확인하지는 않았습니다.이 링크를 직접 다운로드하지 말고 ( "다른 이름으로 링크 저장") 입력하고 "다운로드"버튼을 사용하십시오.
omadawn

2

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

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

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

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

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


1

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

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

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

:-)


글꼴 모음에 대해 이야기하고 있습니까?
Nadav B

지금 기억할 수 없습니다, 죄송합니다 :-)
Antoine

1

들어 각-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;
}

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


1

나는 같은 문제가 있었다.

글꼴 버전에 글꼴 버전 (예 ?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)을 선택하면 글꼴 버전에 액세스하기에 충분해야합니다.


0

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

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

건배!


0

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


0

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


0

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


0

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


0

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

  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. 브라우저 캐시 지우기 및 새로 고침

0

글꼴의 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을 제거하면됩니다.

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


0

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

Christof 감사합니다


가지고 무엇을 정확하게 발급?
Nelles

code다운로드 한 글꼴을 해독하지 못했습니다 : localhost : 52963 / css /…
x-of Rezbach

0

내가 도움이 된 것은 주문을 변경했다는 것입니다. .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;
}

-1
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";

7
이 코드 스 니펫은 문제를 해결할 수 있지만 설명을 포함하면 게시물의 품질을 향상시키는 데 실제로 도움이됩니다. 앞으로 독자들에게 질문에 대한 답변을 제공하므로 해당 사람들이 코드 제안의 이유를 모를 수도 있습니다.
andreas

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.