Google web yazı tiplerini kullanıyorum ve süper büyük yazı tipi boyutlarında iyi, ancak 18px'de korkunç görünüyorlar. Burada ve yazı tipi yumuşatma için çözümler olduğunu okudum, ancak bunu açık bir şekilde açıklayan herhangi bir yer bulamadım ve bulduğum birkaç parçacık hiç çalışmıyor.

Benim h4hemen hemen her tarayıcıda korkunç görünüyor, ancak Chrome kötüsü. Chrome'da, yazı tiplerimin neredeyse tamamı korkunç görünüyor.

Birisi beni doğru yönde gösterebilir mi? Belki de bunu açık bir şekilde açıklayan bir kaynak biliyor musunuz? Teşekkürler!

ÖRNEK EKRAN # 1

Bu ekran görüntüsü, Google tarafından yapılan bir programlama dili olan https://www.dartlang.org/ ana sayfasını gösterir (böylece bu web sitesinin Google tarafından da oluşturulduğunu ima edebiliriz) ve Google Webfonts kullanır.

Ekran görüntüsü solda Google Chrome'u, sağda Firefox / Internet Explorer'ı gösterir .:

ÖRNEK EKRAN # 2

Bu ekran görüntüsü, Typekit tarafından sağlanan web yazı tiplerini kullanarak Adobe.com'daki bir ürün bilgi sayfasını gösterir. Adobe ve Typekit yazı tipleri konusunda profesyoneldir.

Ekran görüntüsü sağda Google Chrome'u, solda Firefox / Internet Explorer'ı gösteriyor:

Sorunun durumu, Haziran 2014: Chrome 37 ile düzeltildi

Son olarak, Chrome ekibi , Temmuz 2014'te herkese açık olacak Chrome 37 ile bu sorun için bir düzeltme yayınlayacak. Mevcut kararlı Chrome 35 ile en son Chrome 37 (erken geliştirme önizlemesi) örnek karşılaştırmasına buradan bakın:

Sorunun durumu, Aralık 2013

1.) Orada YOK uygun çözüm yüklerken yoluyla yazı @import, <link href=veya Google'ın webfont.js. Sorun, Chrome'un Google'ın API'sından korkunç şekilde işleyen .woff dosyaları istemesidir . Şaşırtıcı bir şekilde, diğer tüm yazı tipi dosya türleri güzelce işliyor. Bununla birlikte, oluşturulan yazı tipini biraz "düzleştirecek" bazı CSS hileleri vardır, bu cevapta geçici çözümleri daha derin bulacaksınız.

2.) Yazı tiplerini kendi kendine barındıran, bunun için ilk önce bu fon akışı akışı sayfasındaki başka bir cevapta Jaime Fernandez tarafından gönderilen ve web yazı tiplerini özel bir sırayla yükleyerek bu sorunu gideren gerçek bir çözüm var . Mükemmel cevabını kopyalamak beni kötü hisseder, bu yüzden lütfen şuraya bir göz at. Ayrıca, hemen hemen tüm tarayıcılar tarafından desteklendikleri için yalnızca TTF / OTF yazı tiplerinin kullanılmasını öneren (kanıtlanmamış) bir çözüm de vardır.

3.) Google Chrome geliştirici ekibi bu konuda çalışır. Oluşturma motorunda birkaç büyük değişiklik olduğu için devam eden bir şey var.

Bu konuda büyük bir blog yazısı yazdım, bir göz atmaktan çekinmeyin: Google Chrome'da çirkin font oluşturma nasıl düzeltilir?

Tekrarlanabilir örnekler

İlk sorudaki örneğin bugün Chrome 29'da nasıl göründüğüne bakın:

POZİTİF ÖRNEK:

Sol: Firefox 23, sağ: Chrome 29

POZİTİF ÖRNEK:

Üst: Firefox 23, alt: Chrome 29

NEGATİF ÖRNEK: Krom 30

NEGATİF ÖRNEK: Krom 29

Çözüm

Yukarıdaki ekran görüntüsünü -webkit-text-stroke ile düzeltme:

İlk satır varsayılan, ikincisi:

-webkit-text-stroke: 0.3px;

Üçüncü satırda:

-webkit-text-stroke: 0.6px;

Yani, bu yazı tiplerini düzeltmenin yolu onlara

-webkit-text-stroke: 0.Xpx;

veya RGBa sözdizimi (yorumlarda bulunan nezroy tarafından! Teşekkürler!)

-webkit-text-stroke: 1px rgba(0,0,0,0.1)

Ayrıca eski bir olasılık var : Metne basit (sahte) bir gölge verin:

text-shadow: #fff 0px 1px 1px;

RGBa çözümü (Jasper Espejo'nun blogunda bulundu):

text-shadow: 0 0 1px rgba(51,51,51,0.2);

Bu konuda bir blog yazısı yaptım:

Bu konuda güncellenmek istiyorsanız, ilgili blog yayınına göz atın: Google Chrome'da çirkin yazı tipi oluşturma nasıl düzeltilir ? Bu konuda haberler varsa haber gönderirim.

Orijinal cevabım:

Bu, bundan haberi resmi hata raporu görür Google Chrome ve Google Chrome Ekibi büyük bir hata olduğunu burada . Şu anda, Mayıs 2013'te, hatanın bildirilmesinden 11 ay sonra bile, çözülmedi. Google Webfonts'u dağıtan tek tarayıcının Google'ın kendi tarayıcısı Chrome (!) Olması garip bir şey. Ancak sorunu çözecek basit bir geçici çözüm var, lütfen çözüm için aşağıya bakın.

GOOGLE KROM GELİŞTİRME EKİBİNDEN BEYAN, MAYIS 2013

Hata raporundaki resmi açıklama:

Windows yazı tipi oluşturma işlemimiz aktif olarak üzerinde çalışılmaktadır. ... Geliştiricilerin oynamaya başlayabileceği bir ya da iki kilometre taşında bir şey olmasını umuyoruz. Kararlılığa ne kadar hızlı giderse, her zaman olduğu gibi, herhangi bir gerilemeyi ne kadar hızlı köklendirip yakabileceğimizle ilgili.

Aynı problemim vardı ve çözümü Sam Goddard'ın bu yazısında buldum ,

Yazı tipi çağrısını iki kez tanımlamak için çözüm . İlk olarak önerildiği gibi, tüm tarayıcılar için ve yalnızca özel bir medya sorgusuna sahip Chrome için belirli bir çağrıdan sonra:

@font-face {
  font-family: 'chunk-webfont';
  src: url('../../includes/fonts/chunk-webfont.eot');
  src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
  url('../../includes/fonts/chunk-webfont.woff') format('woff'),
  url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
  url('../../includes/fonts/chunk-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'chunk-webfont';
    src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
  }
}

Bu yöntemle yazı tipi tüm tarayıcılarda iyi görünür. Bulduğum tek olumsuz nokta yazı tipi dosyasının da iki kez indirilmiş olmasıdır.

Bir bulabilirsiniz benim sayfa bu makalenin ispanyolca versiyonu

Chrome, Firefox veya başka herhangi bir tarayıcı gibi yazı tiplerini oluşturmaz. Bu genellikle yalnızca Windows'ta çalışan Chrome'da bir sorundur. Yazı tiplerini düzgünleştirmek istiyorsanız -webkit-font-smoothing, yer h4etiketlerinde bu özelliği kullanın .

h4 {
    -webkit-font-smoothing: antialiased;
}

Ayrıca kullanabilirsiniz subpixel-antialiased, bu size farklı bir düzeltme şekli verir (metni biraz bulanık / gölgeli hale getirir). Ancak, efektleri görmek için gece sürümüne ihtiyacınız olacak. Yazı tipi yumuşatma hakkında daha fazla bilgiyi buradan edinebilirsiniz .

Tamam bunu basitçe kullanabilirsiniz

-webkit-text-stroke-width: .7px;
-webkit-text-stroke-color: #34343b;
-webkit-font-smoothing:antialiased;

Metin renginizin ve üst metin kontur genişliğinin aynı olması gerektiğinden emin olun ve hepsi bu.

Bu her zaman işe yaramayacak önce söyleyeceğim, bunusans-serif yazı tipi ve harici yazı tipleri ile test ettimopen sans

Eğer büyük yazı tiplerini kullanmak Bazen, hedefine yaklaşması denemek font-size:49pxve üst

Bu, 48px boyutunda bir başlık metnidir ( font-size:48px;metni içeren öğede).

Ancak, font-size:49px;48 piksele (ve 50 piksel, 60 piksel, 80 piksel vb.) Kadar yükselirseniz, ilginç bir şey olur

Metin otomatik olarak pürüzsüzleşiyor ve gerçekten iyi görünüyor

Başka bir taraf için ...

Küçük yazı tipleri arıyorsanız, bunu deneyebilirsiniz, ancak çok etkili değildir.

Metnin üst öğesine bir sonraki css özelliğini uygulamanız yeterlidir: -webkit-backface-visibility: hidden;

Böyle bir şeyi dönüştürebilirsiniz:

Buna:

(yazı tipi Kreon )

Bu mülkü koymadığınız zaman, -webkit-backface-visibility: visible; koymadığınızda, miras

Fakat dikkatli olun , bu uygulama her zaman iyi sonuçlar vermeyecektir, dikkatlice görürseniz, Chrome metnin biraz bulanık görünmesini sağlar.

Bir başka ilginç gerçek:

-webkit-backface-visibility: hidden;Chrome'da bir metni dönüştürdüğünüzde de çalışır ( -webkit-transformözellik, dönüşleri, eğrileri vb. içeren)

olmadan -webkit-backface-visibility: hidden;

İle -webkit-backface-visibility: hidden;

Bu uygulamaların neden işe yaradığını bilmiyorum, ama benim için işe yarıyor. Tuhaf ingilizcem için özür dilerim.