다운로드한 글꼴을 디코딩하지 못했습니다. 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우리가 서버 index에 웹 .우리가 사용하는 개발 서버(라이브 서버)가 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

할 때 이 . 특성 git"에.warning: CRLF will be replaced by LF"

이에 대한 해결책은 문제가 발생하는 글꼴을 .git 특성에 추가하는 것입니다.

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

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

글꼴이 손상되었는데 문제 없이 로딩되는 것 같았고 Chrome devtools의 Sources 아래에 표시되는 것 같았지만 바이트 수가 정확하지 않아 다시 다운로드하여 해결했습니다.

저도 같은 문제가 있었는데, 그것은 이 파일들을 텍스트로 취급하는 깃 때문이었습니다.따라서 빌드 에이전트에서 파일을 체크아웃하는 동안 바이너리가 유지되지 않았습니다.

을 당신의 니추합다에 추가하세요..gitattributes파일을 작성하고 시도합니다.

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

AWS Amplify에서 이 문제를 겪고 있는 사람은 다음을 수행하십시오.

1. AWS Amplify 앱으로 이동
2. 앱 설정 클릭->다시 쓰기 및 리디렉션
3. 소스 주소를 다음으로 변경:
   </^[^.]+$|\.(?!(css|gif|ico|otf|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

참고: 내가 해야 할 일은 다음을 추가하는 것뿐이었습니다.otf누락되었기 때문에 원래 AWS Amplify 구성에 있습니다.나머지 구성은 이미 있습니다.

다음과 같이 @font-face에 형식을 지정합니다.

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

해라

@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

을 할 때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/.woff2https ://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

...링크를 마우스 오른쪽 단추로 클릭하여 저장하는 대신 각 파일을 클릭하고 '다운로드' 버튼을 사용하여 저장합니다.

저는 링크를 다운로드 받은 HTML 페이지로 저장하고 FontAwesome 파일 바이너리 자체가 아닌 것을 발견했습니다.

바이너리를 모두 얻으면 효과가 있습니다.

하면 부트스트랩 CSS (Update CSS)bootstrap.min.css 및 파일 파일 및 글꼴 파일입니다.저는 이 해결책으로 제 문제를 해결했습니다.

angular-cli 및 webpack 사용자의 경우 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) 에 URL을

@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)를 선택하면 글꼴 버전에 액세스하기에 충분합니다.

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

이제 코드는 다음과 같습니다.

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

node.js 서버에서 실행되는 것과 같은 문제가 있었습니다.문제는 내 네비게이터가 아니라 서버에서 발생한 것입니다.
나는 단순히 그것을 사용하고 있었습니다.fs.readFile(...)은 작은 파일)에 했지만, 제 은 약 150ko, 이 항목에 150ko 였습니다. :/http:/http:/http:/http:/http:/.
하여 이 문제를 트림을사이해문다니습결스했제.
(데이터는 스트림에서 읽을 때 전송됨)

const stream = fs.createFileStream(filename);

stream.on("error", () => {
    // error : file does not exist, etc.
    res.setHeader("content-type", "text/plain");
    res.statusCode = 404;
    res.end("ouuups, problem :/");
}

stream.on("open", () => {
    // good
    res.setHeader("content-type", mime);
        // mime is your font / file mime-type
    res.statusCode = 200;
    stream.pipe(res);
}

제 문제는 제가 두 개의 글꼴을 선언하는 것이었고, scss는 당신이 글꼴의 이름을 선언하기를 기대하는 것 같습니다.

당신의 뒤에@font-face{}선언해야 합니다.$my-font: "OpenSans3.0 or whatever";

각 글꼴에 대해 이 값을 지정합니다.

:-)

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

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

건배!

저는 ASP를 사용하고 있습니다.NET with IIS 그리고 IIS: '.woff2' / 'application/font-woff'에 MIME 유형을 추가하기만 하면 된 것으로 나타났습니다.

많은 다른 접근법을 시도하고, 많은 재설치와 검사를 한 후, 저는 크롬에서 검색 데이터(캐시된 이미지와 파일)를 지우고 페이지를 새로 고치는 것으로 문제를 해결했습니다.

열고 저장할 때도 같은 문제가 발생했습니다..woff그리고.woff2Sublime 텍스트를 통한 파일EditorConfig선택end_of_line = lfSublime에 파일을 열지 않고 글꼴 폴더에 복사만 하면 문제가 해결됩니다.

다른 답변이 효과가 없으면 시도해 보십시오.

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. 브라우저 캐시 지우기 및 다시 로드

누군가와 관련이 있을 경우를 대비해서요ASP를 사용했을 때와 똑같은 오류가 발생했습니다.Visual 스튜디오의 NET 및 C#.비주얼 스튜디오 내에서 앱을 시작했을 때 작동했지만, 이 문제가 발생했습니다.그러던 중 제 프로젝트의 경로에 문자 "#"(c:\C#\test application)이 포함된 것으로 나타났습니다.이로 인해 IIS Express(IIS일 수도 있음)가 혼동되어 이 문제가 발생하는 것 같습니다."#"은 ASP 어딘가에 예약된 문자인 것 같습니다.NET 이하.경로 변경이 도움이 되었고 이제는 예상대로 작동합니다.

그리스도께 경의를 표합니다.

저는 이미 icomoon에서 생성된 아이콘 글꼴에 대해 두 번이나 이 문제를 겪었습니다.두 경우 모두 아이콘 중 하나가 "공간 문자"(20)를 사용했습니다.

공백 문자(코드 20)를 사용하면 이 문제가 발생하는 것 같습니다.코드를 20(스페이스)이 아닌 다른 것으로 변경한 후 크롬에서 글꼴이 제대로 작동했습니다.

.htaccess가 이러한 유형의 파일을 다시 쓰려고 했기 때문에 이 메시지를 받았습니다.확장을 추가하는 것만으로 문제가 해결되었습니다(제 경우에는 woff와 woff2를 추가했습니다.

RewriteRule \.(js|css|svg|gif|jpg|jpeg|png|woff|woff2)$ -  [L]

로더 모듈을 사용하고 있습니까?더 이상 사용되지 않습니다. 파일로더 모듈을 사용할 때도 같은 문제가 있었습니다.자산 모듈을 사용하도록 마이그레이션되었으며 동일한 문제를 해결했습니다.

로컬에서 글꼴이 작동하는 문제가 있었지만, 배포했을 때 글꼴이 작동하지 않았습니다.을 로드하고 글꼴 소문를예글로중는글드들다이중있대어니가습었문자이름에파일업꼴작데었하는용사하여일파꼴자을예▁i▁charact▁uppercase(중다▁doinge).url("./fonts/helevectia/helevectia-regular.ttf")하지만 그 이름은.url("./fonts/Helevectia/Helevectia-Regular.ttf")에서는 이 가 있는 것처럼 , 않았습니다. 로컬에서는 이것이 효과가 있는 것처럼 보이지만, 제가 배포했을 때는 그렇지 않았습니다.나는 대문자를 고쳤고 더 이상 오류가 발생하지 않았습니다.

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

글꼴의 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 파일에서 이 태그를 제거하기만 하면 됩니다.이 옵션을 제거한 후 글꼴 폴더로 이동해야 합니다. 그러면 다음이 표시됩니다.

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

그러면 문제가 해결될 것입니다.

저도 같은 문제를 겪고 있었는데, 이것은 저에게 효과가 있었습니다. 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