Google webfonts Windows üzerinde Chrome dalgalı hale

SORU

8 HAZİRAN 2012, Cuma

Google webfonts Windows üzerinde Chrome dalgalı hale

Web sitemde Google Webfonts hizmeti kullanıyorum ve çok güveniyor. En iyi tarayıcılar işler, ama Windows üzerinde Chrome, özellikle kötü işler. Çok dalgalı ve pürüzlü.

Şimdiye kadar öğrendim ne Chrome gerektirir .svg formatı ilk yüklenecek yazı tipi. Ancak kullandığım yazı tipi, Asap denir, kullanılabilir .woff. Bunun için çevirdim .benim stil (önce .bu eklediğim zaman ücretsiz çevrimiçi hizmeti kullanarak svg, ama woff), bu bir şeyi değiştirmez.

Ayrıca denedim:

-webkit-font-smoothing: antialiased;
text-shadow: 0px 0px 0px;

Ya da metni daha sorunsuz hale yardımcı olacağını umuyor.

Şu anda fikir kalmadı ve yazı tiplerini değiştirmek için nefret ediyorum. Kimse bu sorunu nasıl çözebilirim bir fikri olan var mı? Adobe CS oluşturma, sadece bir mac kendi görerek test etmek için kullanıyorum. Site olduğu için link: www.symvoli.nl/about

Şimdiden teşekkürler!

11 Nisan 2013 düzenleme:

Chrome 35 Beta sonunda bu sorunu çözmüş gibi görünüyor:

enter image description here

CEVAP

22 Kasım 2012, PERŞEMBE

Ağustos 2014 Güncelleme

Google sonunda Chrome 37 bu sorunu giderir doğal olarak!!!. Ama tarihsel nedenlerle bu cevabı silmek istemiyorum.

Sorun

Bu sorun nedeniyle oluşturulurchrome aslında anti-aliasing doğru ile render TrueType yazı tiplerini olamaz. Ancak, krom hala SVG dosyaları oluşturur. Eğer svg çağrısı sözdizimi içinde woff yukarıdaki dosyayı taşırsanız, krom svg indir ve woff dosyası yerine bunu kullanın. Bazı hileler size iş teklif, ama sadece belirli bir yazı tipi boyutları gibi.

Ama bu hata Chrome geliştirici ekibi için çok iyi bilinen ve Temmuz 2012'den bu yana tespit edilmiştir. Resmi hata raporu burada iplik bakın: https://code.google.com/p/chromium/issues/detail?id=137692

Ekim 2013 (@Catch22 Sayesinde) güncelleyin

Görünüşe göre bazı internet siteleri ile karşılaşabilirsinizsvg render zaman zaman aralığı verir. better way cilt bir şey yok. Eğer bir medya Sorgu ile svg Chrome için özel çağırırsanız, boşluk sorunları yok:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
      font-family: ‘MyWebFont’;
      src: url(‘webfont.svg#svgFontName’) format(‘svg’);
  }
}

İlk yaklaşım çözüm:

Fontspring kurşun geçirmez svg ilk hizmet etmek için modifiye kullanımı:

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); 
    src: url('webfont.eot?#iefix') format('embedded-opentype'),
         url('webfont.svg#svgFontName') format('svg'),
         url('webfont.woff') format('woff'),
         url('webfont.ttf')  format('truetype');
}