ไม่สามารถถอดรหัสแบบอักษรที่ดาวน์โหลดข้อผิดพลาดในการแยกวิเคราะห์ OTS: แท็กเวอร์ชันไม่ถูกต้อง + ราง 4

ฉันกำลังทำการรวบรวมเนื้อหาล่วงหน้าและเรียกใช้แอปพลิเคชันในโหมดการผลิต หลังจากรวบรวมเมื่อฉันโหลดหน้าดัชนีของฉันฉันได้รับคำเตือนดังต่อไปนี้ในคอนโซล Chrome:

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ทุกประการและในกรณีของฉันมันเป็นเพราะเส้นทางที่ไม่ถูกต้องสำหรับการประกาศ ผู้ตรวจสอบเว็บไม่เคยบ่นกับ 404 เนื่องจากเซิร์ฟเวอร์ dev ที่เราใช้ (เซิร์ฟเวอร์สด) ได้รับการกำหนดค่าให้แสดงค่าเริ่มต้น index.html บน 404: s ใด ๆ หากไม่ทราบรายละเอียดใด ๆ เกี่ยวกับการตั้งค่าของคุณนี่อาจเป็นตัวการ

หากทำงานบน IIS เป็นเซิร์ฟเวอร์และ. net 4 / 4.5 อาจไม่มีคำจำกัดความ mime / file extension ใน Web.config - ดังนี้:

<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

ฉันมีแบบอักษรที่เสียหายแม้ว่าดูเหมือนว่าจะโหลดได้โดยไม่มีปัญหาและภายใต้ Sources ใน 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- ไม่สม่ำเสมอ.woff2

ปัญหาคือมีข้อผิดพลาดพร็อกซีเมื่อดาวน์โหลดไฟล์ (มีข้อความแสดงข้อผิดพลาด HTML)

ไปที่ที่อยู่ด้านล่างบน GitHub และดาวน์โหลดไฟล์ FontAwesome แต่ละไฟล์

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

... แต่แทนที่จะคลิกขวาและบันทึกลิงค์เป็นให้คลิกที่ไฟล์แต่ละไฟล์และใช้ปุ่ม 'ดาวน์โหลด' เพื่อบันทึก

ฉันพบว่าการบันทึกลิงก์เมื่อดาวน์โหลดหน้า HTML ไม่ใช่ไบนารีไฟล์ FontAwesome

เมื่อฉันมีไบนารีทั้งหมดแล้วมันก็ใช้ได้ผลสำหรับฉัน

ปัญหาของฉันคือฉันประกาศสองฟอนต์และ scss ดูเหมือนว่าคุณจะประกาศชื่อฟอนต์

หลังจากที่ @font-face{} คุณต้องประกาศ $my-font: "OpenSans3.0 or whatever";

และสิ่งนี้สำหรับแต่ละแบบอักษร

:-)

หากคุณใช้ bootstrap ให้อัพเดตbootstrap.min.cssไฟล์bootstrap 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) ไปยัง URLS แบบอักษรควรทำตามเคล็ดลับ;)

@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 ของแบบอักษรและเลือก "Get Info" (Mac OSX) "Properties" (Windows) ในเมนูบริบทก็เพียงพอแล้วสำหรับการเข้าถึงเวอร์ชันแบบอักษร

หากคุณใช้ Chrome ให้ลองเพิ่มแบบอักษรรุ่น opentype (OTF) ดังที่แสดงด้านล่าง:

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

ไชโย!

ฉันใช้ ASP.NET กับ IIS และปรากฎว่าฉันแค่ต้องเพิ่ม MIME-type ให้กับ IIS: '.woff2' / 'application / font-woff'

หลังจากลองใช้วิธีอื่น ๆ มากมายและติดตั้งและตรวจสอบซ้ำหลายครั้งฉันเพิ่งแก้ไขปัญหาโดยการล้างข้อมูลการท่องเว็บจาก Chrome (รูปภาพและไฟล์แคช) แล้วรีเฟรชหน้า

ฉันมีปัญหาเดียวกันเมื่อฉันเปิดและบันทึก.woffและ. woff2ไฟล์ผ่านข้อความ Sublime กับตัวเลือกEditorConfig end_of_line = lfฉันเพิ่งคัดลอกไฟล์ไปยังโฟลเดอร์ฟอนต์โดยไม่ต้องเปิดมันใน Sublime และปัญหาได้รับการแก้ไขแล้ว

หากคำตอบอื่นไม่ได้ผลให้ลอง:

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 ของคุณ หลังจากลบสิ่งนี้คุณต้องไปที่โฟลเดอร์ฟอนต์ของคุณและคุณจะเห็น:

และสร้างไฟล์ของฟอนต์เหล่านี้คุณเพียงแค่ต้องลบแท็กเวอร์ชัน-v = 4.6.3ออกจากชื่อไฟล์

จากนั้นปัญหาจะคลี่คลาย

ในกรณีที่เกี่ยวข้องกับใครบางคน ฉันได้รับข้อผิดพลาดเดียวกันโดยใช้ ASP.NET และ C # ใน Visual studio เมื่อฉันเริ่มแอปจากภายในสตูดิโอภาพมันใช้งานได้ แต่ฉันพบปัญหานี้ ในระหว่างนี้ปรากฎว่าเส้นทางไปยังโครงการของฉันมีอักขระ "#" (c: \ C # \ testapplication) ดูเหมือนว่าจะทำให้ IIS Express สับสน (อาจจะเป็น IIS ด้วย) และทำให้เกิดปัญหานี้ ฉันเดาว่า "#" เป็นอักขระที่สงวนไว้ใน ASP.NET หรือต่ำกว่า การเปลี่ยนเส้นทางช่วยได้และตอนนี้ได้ผลตามที่คาดไว้

ขอแสดงความนับถือ Christof

สิ่งที่ช่วยฉันคือฉันเปลี่ยนคำสั่งซื้อ โหลด. eot ก่อน แต่ข้อผิดพลาดของฉันคือการโหลด. eot ดังนั้นฉันจึงทิ้ง. eot เป็น src แรกสำหรับ woff2 และข้อผิดพลาดก็หายไป

ตอนนี้รหัสคือ:

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

ฉันมีปัญหานี้สองครั้งแล้วกับแบบอักษรไอคอนที่สร้างโดย icomoon ในทั้งสองกรณีหนึ่งในไอคอนใช้ "อักขระเว้นวรรค" (20)

ดูเหมือนว่าการใช้อักขระเว้นวรรค (รหัส 20) จะทำให้เกิดปัญหานี้ หลังจากที่ฉันเปลี่ยนรหัสเป็นอย่างอื่นที่ไม่ใช่ 20 (เว้นวรรค) แบบอักษรจะทำงานอย่างถูกต้องใน Chrome

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