İndirilen yazı tipi kodu çözülemedi

Bu, Chrome'da aldığım bir hata ve maalesef araması bana çok fazla sonuç vermedi. Yazı tipinin kendisi doğru görünüyor. Ancak yine de bu hatayı / uyarıyı alıyorum. Daha spesifik olarak, bu tam uyarıdır:

"İndirilen yazı tipi kodu çözülemedi: http: // localhost: 8000 / app / fonts / Lato / "

Benim CSS bunlar:

@font-face {
    font-family:"Lato";
    src: url("../fonts/Lato/");
}

html, body {
    font-family:'Lato';
}

Sadece anlamıyorum. Yazı tipi doğru bir şekilde uygulandı, ancak uyarı her zaman orada. Kullanmaya çalışmak Sans-Serifyazı tipini normal tarayıcı yazı tipine döndürür, bu yüzden olabilir, ancak emin değilim ve aradıktan sonra bile hiçbir şey bulamadım. Teşekkürler!

DÜZENLE

Hepsi aynı aileden gelen çeşitli yazı tipi dosyaları vardır. Hepsini yüklemeye çalışıyorum. Yazı tipi dosyaları .ttf. Bir yerel klasörden yükleyerek ediyorum ve çeşitli font-dosyaları gibi vardır Lato-Black.ttf, Lato-Bold.ttf, Lato-Italic.ttfvb

Css kuralında dosyanın uzantısını eklemeniz gerekir. Mümkün olan en derin desteği olan bu örnek:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

DÜZENLE:

"İndirilen yazı tipi çözülemedi", yazı tipinin bozuk veya eksik olduğu anlamına gelir (eksik metrikler, gerekli tablolar, adlandırma kayıtları, milyonlarca olası şey).

Bazen bu soruna yazı tipinin kendisi neden olur. Google yazı tipi ihtiyacınız olan doğru yazı tipini sağlar, ancak yazı tipi yüzü gerekirse tüm yazı tipi biçimini oluşturmak için Transfonter'ı kullanırım.

Bazen dosyayı bozan FTP istemcisi (bu durumda yerel bilgisayarda olduğu için değil). Dosyayı ASCII'de değil ikili olarak aktardığınızdan emin olun.

Visual Studio'da, söz url()konusu yazı tipinin yanlış bir yolundan kaynaklanan benzer bir sorunla karşılaştım .

Değiştirdikten sonra bu hatayı almayı bıraktım (örneğin):

@@font-face{
    font-family: "Example Font";
    src: url("/Fonts/ExampleFont.eot?#iefix");

buna:

@@font-face{
    font-family: "Example Font";
    src: url("../fonts/ExampleFont.eot?#iefix");

Biçimden ('woff') biçimine ('font-woff') dönüştürmek, bu sorunu şimdi çözmeme yardımcı oluyor.

Germano Plebani'nin cevabından biraz değişiklik yap.

 @font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('font-woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Lütfen tarayıcı kaynaklarınızın açıp açamayacağını ve türünün ne olduğunu kontrol edin

Sunucunuzun font dosyalarını doğru mime / type ile gönderdiğinden emin olun .

Son zamanlarda nginx kullanarak aynı sorun var çünkü bazı yazı tipi MIME türleri onun vanilya /etc/nginx/mime.typesdosyasında eksik .

Ben böyle onlara gereken yere eksik mime türleri ekleyerek sorunu düzeltildi:

location /app/fonts/ {

  #Fonts dir
  alias /var/www/app/fonts/;

  #Include vanilla types
  include mime.types;

  #Missing mime types
  types  {font/truetype ttf;}
  types  {application/font-woff woff;}
  types  {application/font-woff2 woff2;}
}

Ayrıca nginx'te mime.types'i genişletmek için bunu kontrol edebilirsiniz: varsayılan nginx mime.types dosyasını genişletme

type="text/css"Bağlantı etiketime eklemek zorunda kaldım. Ben değiştirdim:

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">

için:

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet" type="text/css">

Ben değiştirdikten sonra hata kayboldu.

Sadece aynı sorunu yaşadım ve değiştirerek çözdüm

src: url("Roboto-Medium-webfont.eot?#iefix")

için

src: url("Roboto-Medium-webfont.eot?#iefix") format('embedded-opentype')

Benim için, https kullanarak bir google yazı tipine başvurduğumda bu hata oluştu. Http'ye geçtiğimde hata ortadan kalktı. (ve evet, bunun nedeni olduğunu onaylamak için birkaç kez denedim)

Bu yüzden değiştim:

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,100,500,900);

Kime:

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,100,500,900);

Bazen bu sorun, yazı tiplerini yanlış FTP yöntemini kullanarak yüklediğinizde / indirdiğinizde ortaya çıkar. Fontların ASCII değil, ikili yöntem kullanılarak FTP ile düzenlenmiş olması gerekir. (Ruh halinize bağlı olarak, mantıksız hissedebilirsiniz, lol). Font dosyalarını ASCII yöntemini kullanarak ftp yaparsanız, bu hata iletisini alabilirsiniz. Dosyalarınızı 'otomatik' yöntemle ftp yaparsanız ve bu hata iletisini alırsanız, ftp'yi ikili yöntemi zorlamayı deneyin.

Font v4.4 ile aynı sorunu yaşıyordum ve woff2 formatını kaldırarak düzelttim. Yalnızca Chrome'da bir uyarı alıyordum.

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Benim durumumda .htaccess dosyasında yanlış bir yol dosyası oluştu. lütfen dosya yolunuzun doğruluğunu kontrol edin.

Benim için hata yazı tipi dosyalarını yüklemeden önce FTP'yi ikili moda almayı unutmaktı.

Düzenle

Görüntüler gibi diğer ikili veri türlerini yükleyerek bunu test edebilirsiniz. Ayrıca görüntülenmezse, bu sizin sorununuz olabilir.

Ben de aynı sorunu vardı ama 'Content-Type': 'application / x-font-ttf' tüm .ttf dosyaları için yanıt başlığında ekleyerek çözdüm

Benim durumumda, bunun nedeni yazı tipi dosyalarının eklenmesini kapsayan bir SVN yama dosyası oluşturmaktı. Şöyle ki:

1. Yerel dosya sisteminden alt sürüm gövdeye yazı tipi dosyaları ekleme
2. Bagaj beklendiği gibi çalışıyor
3. Font dosyalarının eklenmesini eklemek için gövde değişikliklerinin SVN yamasını oluşturma
4. Yamayı başka bir dala uygula
5. Font dosyaları alt sürüm dalına eklenir (ve kaydedilebilir), ancak bozuktur ve OP'de hata verir.

Çözüm, font dosyalarını yerel dosya sistemimden doğrudan şubeye yüklemekti. SVN yama dosyalarının her şeyi ASCII formatına dönüştürmesi gerektiğinden ve yazı tipi dosyaları için ikili olarak tutulmadığından bunun olduğunu varsayıyorum. Ama bu sadece bir tahmin.

Benim durumumda - Gatsby ile React kullanmak - sorun tüm yollarımı iki kez kontrol ederek çözüldü. React / Gatsby ile Sass kullanıyordum ve Gatsby kaynak dosyaları yazı tiplerini derlenmiş dosyalardan farklı bir yerde arıyordu. Dosyaları her yola kopyaladıktan sonra bu sorun ortadan kalktı.

Benim durumumda bir şablon indirirken yazı tipi dosyaları sadece boş dosyalardı. Muhtemelen indirme ile ilgili bir sorun. Chrome bu genel hatayı verdi. İlk başta woffbunu font-woffçözmekten çözüme geçmenin çözümünü düşündüm , ancak bu sadece Chrome'un yazı tiplerini yoksaymasını sağladı. Benim çözümüm yazı tiplerini tek tek bulmak ve indirmek / değiştirmekti.

Express kullanıyorsanız, şu gibi bir şey ekleyerek statik içerik sunumuna izin vermeniz gerekir: var server = express (); server.use (express.static ( './ halka')); // burada uygulama kökü klasörü herkese açıktır; burada yazı tipleri bulunur, yani public / fontlar veya public / dist / fontlar ... // connect kullanıyorsanız, benzer bir yapılandırma için google.

Net Framework 4.5 / IIS 7 kullanıyorum

Düzeltmek için yazı tipi dosyası olan klasöre Web.config dosyasını koydum.

Web.config içeriği:

<?xml version="1.0"?>
<configuration>
  <system.web>
    <authorization>
      <allow users="*" />
    </authorization>
  </system.web>
</configuration>

benim için indirilmemiş lfs dosyaları ile ilgili bir sorun oldu

git lfs fetch --all

sorunu çözdü.

bkz. https://github.com/git-lfs/git-lfs/issues/325

Sunucudaysa (localhost'ta değil), yazı tiplerini manuel olarak yüklemeyi deneyin, çünkü bazen FTP istemcisi (örneğin, FileZilla) dosyaları bozar ve soruna neden olabilir. Benim için Cpanel arayüzünü kullanarak manuel olarak yükledim.

Benim durumum benzer görünüyordu ama yazı tipi bozuk (ve kodunu çözmek imkansız). Bunun nedeni maven'deki yapılandırmadır. İçindeki yazı tipi uzantıları için FiltrelenmemişFileExtension eklemek maven-resources-pluginbana yardımcı oldu:

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-resources-plugin</artifactId>
    <configuration>
        <nonFilteredFileExtensions>
            <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
            <nonFilteredFileExtension>otf</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
            <nonFilteredFileExtension>eot</nonFilteredFileExtension>
        </nonFilteredFileExtensions>
    </configuration>
</plugin>