İndirilen yazı tipi kodu çözülemedi, OTS ayrıştırma hatası: geçersiz sürüm etiketi + raylar 4

Varlıkları derleme yapıyorum ve uygulamayı üretim modunda çalıştırıyorum. Dizin sayfamı yüklediğimde derlemeden sonra krom konsolunda aşağıdaki uyarıları aldım:

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

Sorun, kareleri göstermek yerine simgeleri yüklememesi .

özel yazı tiplerini kullandık ve kod:

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

Sonumda neyin eksik olduğunu bilmiyorum. Ben çok araştırdım ve aynı zamanda çözüm denedim ama herhangi bir başarı elde etmedi.Gelişim modunda iyi çalışıyor ama üretim modunda neden gösteren kareyi bilmiyorum.

Aynı hatayı aldım ve benim durumumda @font-facebildirimin yanlış bir yolu olduğu ortaya çıktı . Kullandığımız dev sunucusu (canlı sunucu) herhangi bir 404: s'de varsayılan index.html'yi sunmak üzere yapılandırıldığından, web denetçisi hiçbir zaman 404'ten şikayet etmedi. Kurulumunuz hakkında herhangi bir ayrıntı bilmeden, bu olası bir suçlu olabilir.

IIS üzerinde sunucu ve .net 4 / 4.5 olarak çalışıyorsa, Web.config dosyasında mime / dosya uzantısı tanımları eksik olabilir:

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

Aynı sorunu yaşıyordum., 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

Yazı tipinizi işlemeye çalışırken bu hata iletisini alırsanız, bu .gitattributes " warning: CRLF will be replaced by LF" ile ilgili bir sorundur

Bunun çözümü .gitattributes ile hangi sorunu alıyorsanız yazı tipini eklemektir.

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

Sonra bozuk yazı tipi dosyalarını sildim ve yeni yazı tipi dosyalarını yeniden uyguladım ve harika çalışıyor.

Deneyin

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

ve dosyanızı şu şekilde yeniden adlandırın: application.css.scss

Bozuk bir yazı tipim vardı, ancak sorunsuz bir şekilde yükleniyor gibi görünüyordu ve Chrome cihazlarındaki Kaynaklar altında görüntüleniyor gibi görünüyor, bayt sayısı doğru değildi, bu yüzden tekrar indirdim ve çözdüm.

Sadece @ font-face biçiminde formatı aşağıdaki gibi belirtin:

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

Ben aynı sorunu vardı ve bu git metin olarak bu dosyaları tedavi git yüzünden oldu. Bu nedenle, yapı aracılarındaki dosyaları kontrol ederken, ikili dosya korunmaz.

Bunu .gitattributesdosyanıza ekleyin ve deneyin.

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

Kullanırken angular-cli, bu benim için işe yarıyor:

<?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>

Aşağıdaki hataları alıyordum:

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

ham dosyayı doğrudan indirdikten sonra düzeltildi:
https://github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-regular.woff2

Sorun, dosyayı indirirken bir proxy hatası oluşmasıydı (HTML hata mesajını içeriyordu).

GitHub'da aşağıdaki adrese gidin ve FontAwesome dosyalarının her birini indirin.

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

... ancak bağlantıyı sağ tıklayıp kaydetmek yerine her bir dosyayı tıklayın ve kaydetmek için 'İndir' düğmesini kullanın.

Bağlantıyı, bir HTML sayfası olarak indirdiğimi ve FontAwesome dosya ikili dosyasının kendisini değil buldum.

Bir kez tüm ikili dosyaları elde ettikten sonra benim için çalıştı.

Benim sorunum, iki yazı tipi bildiriyordu ve scss yazı tipinin adını bildirmek bekliyoruz gibi görünüyor.

@font-face{} senden sonra beyan etmelisin $my-font: "OpenSans3.0 or whatever";

ve bu her yazı tipi yüzü için.

:-)

İçin açısal-cli ve webpack kullanıcıları ben, css dosyasında yazı içe yüzden de url konumu aşağıdaki şekilde tek tırnak ile kodlanmış veriniz Bazı sorun olduğunu şüphelenilen -

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

Bu yazı eski olabilir, ama bu benim için işe yarayan çözüm.

Aynı sorunu yaşadım.

Yazı tipi sürümünü (ör. ?v=1.101) Yazı tipi URL'lerine eklemek hile yapmalıdır;)

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

Yazı tipi sürümüne erişmek için yazı tipinin TTF sürümünde (sağ fare tıklaması) tıklanması ve bağlam menüsünde "Bilgi Al" (Mac OSX) "Özellikler" (Windows) seçilmesi yeterli olmalıdır.

Chrome kullanıyorsanız, yazı tipinizin aşağıda gösterildiği gibi bir opentype (OTF) sürümünü eklemeyi deneyin:

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

Şerefe!

Bootstrap kullanıyorsanız bootstrap css ( bootstrap.min.css) dosyasını ve font dosyalarını güncelleyin. Bu çözümle ilgili sorunumu çözdüm.

IIS ile ASP.NET kullanıyorum ve ben sadece IIS için MIME türü eklemek için gerekli ortaya çıkıyor: '.woff2' / 'uygulama / font-woff'

Diğer birçok yaklaşımı ve yeniden yükleme ve denetimleri denedikten sonra, Chrome'dan (önbelleğe alınmış resimler ve dosyalar) göz atma verilerini temizleyip sayfayı yenileyerek sorunu çözdüm.

Aynı problemi açıp kurtardığımda da yaşadım .woff. seçeneği woff2ile Sublime Metin yoluyla dosyaları . Dosyaları Sublime'a açmadan font klasörüne kopyaladım ve sorun çözüldü.EditorConfigend_of_line = lf

Diğer yanıtlar işe yaramadıysa deneyin:

1. .htaccess dosyasını kontrol et

   # 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. sunucu önbelleğini temizle

3. tarayıcı önbelleğini temizle ve yeniden yükle

Yazı tipinizin css dosyasını kontrol edin . (fontawesome.css / fontawesome.min.css) , şöyle göreceksiniz:

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

yazı tipinizin dosya uzantısı adından sonra sürüm etiketini göreceksiniz . Sevmek:

v = 4.6.3

Bu etiketi css dosyanızdan kaldırmanız yeterlidir. Bunu kaldırdıktan sonra, yazı tipi klasörünüze gitmeniz gerekir.

Ve bu yazı tipinin dosyalarını oluşturun, sadece -v = 4.6.3 sürümünü dosya adından kaldırmanız gerekir .

Sonra, sorun çözülecektir.

bunun birisi için geçerli olması durumunda. Visual Studio'da ASP.NET ve C # kullanarak tam olarak aynı hatayı aldım. Uygulamayı görsel stüdyodan başlattığımda çalıştı, ancak bu sorunu aldım. Bu arada, projeme giden yolun "#" karakterini (c: \ C # \ testapplication) içerdiği ortaya çıktı. Bu, IIS Express'i (belki de IIS) karıştırıyor gibi görünüyor ve bu soruna neden oluyor. Sanırım "#" ASP.NET veya altında bir yerde ayrılmış bir karakter. Yolu değiştirmek yardımcı oldu ve şimdi beklendiği gibi çalışıyor.

Saygılarımızla Christof

Bana yardımcı olan siparişi değiştirmemdi. Önce .eot get yüklenir, ancak benim hatam .eot yüklenirken oldu. Bu yüzden .eot'u woff2 için ilk src olarak attım ve hata gitti.

Kod şimdi:

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

Ve öyleydi:

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

Aynı sorunu yaşıyordum, bu benim için çalıştı https://github.com/webpack/webpack/issues/1468