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

다운로드 한 글꼴을 해독하지 못했습니다. 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가 표시되는 것처럼 보였으므로 바이트 수가 올바르지 않아 다시 다운로드하여 해결했습니다.

---

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

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

---

Go to the address below on GitHub and download each of the FontAwesome files.

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

...but instead of right-clicking and saving the link as, click on each of the files and use the 'Download' button to save them.

I found that saving the link as downloaded an HTML page and not the FontAwesome file binary itself.

Once I had all of the binaries it worked for me.

---

My issue was that I was declaring two fonts, and scss seems to expect that you declare the name of the font.

after your @font-face{} you must declare $my-font: "OpenSans3.0 or whatever";

and this for each font-face.

:-)

---

For angular-cli and webpack users I suspected that there is some issue while importing the fonts in css file , so please also provide url location encoded with single quotes as following -

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

This post might be old , but this is the solution which worked for me .

---

If your are using Chrome, try adding an opentype (OTF) version of your font as shown below:

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

Cheers!

---

If you use bootstrap then Update bootstrap css(bootstrap.min.css) file and fonts files. I fixed my problem with this solution.

---

I am using ASP.NET with IIS and it turns out I just needed to add the MIME-type to IIS: '.woff2' / 'application/font-woff'

---

After trying lots of other approaches, and lots of re-installs and checks, I have just fixed the issue by clearing out browsing data from Chrome (cached images and files) and then refreshing the page.

---

I had same problem when I opened and saved .woff and .woff2 files through Sublime Text with EditorConfig option end_of_line = lf. I just copied files to font folder without opening them into Sublime and problem was solved.

---

If other answers didn't work try:

1. check .htaccess file

   # 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. clear server cache

3. clear browser cache & reload

---

Check your font's css file. (fontawesome.css/fontawesome.min.css), you will see like this:

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

you will see version tag after your font's file extension name. Like:

-v=4.6.3

You just need to remove this tag from your css file. After removing this, you need to go to your fonts folder, And you will see:

And, Form these font's files, you just need to remove the version tag -v=4.6.3 from the file name.

Then, The problem will be sloved.

---

Just state format at @font-face as following:

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

---

I've had the same issue.

Adding the font version (e.g. ?v=1.101) to the font URLS should do the trick ;)

@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 */
}

Clicking (right mouse click) on font's TTF version and selecting "Get Info" (Mac OSX) "Properties" (Windows) in context menu should be enough to access the font version.

---

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

---

I was having the same issue, this worked for me https://github.com/webpack/webpack/issues/1468

참고URL : https://stackoverflow.com/questions/34288778/failed-to-decode-downloaded-font-ots-parsing-error-invalid-version-tag-rails