GÜNCEL Ağustos 2020
Artık alt piksel yazı tipi yumuşatmayı etkinleştirmek için Safari'yi bir medya sorgusuyla hedeflemenize gerek yok. Varsayılan iyidir.
Ancak varsayılan olarak alt piksel yazı tipi düzeltmeyi kullanmakla birlikte, önemli bir var merhem içinde sinek içinde Chrome'un yazı tipi yumuşatma bir arayan herkes için, metnin tutarlı render .
- Bu, Chrome'un koyu bir arka plan üzerinde açık renkli metin oluşturmasıdır
- Bu, Chrome'un açık renkli bir arka plan üzerinde koyu metin oluşturmasıdır
Yukarıdaki e harfindeki bütünün boyutuna bakın. Koyu bir arka plan üzerindeki Açık metin, açık bir arka plan üzerindeki koyu metinden (aynı css yazı tipi stiliyle) fark edilir derecede daha ağır bir şekilde oluşturulur.
Kullanıcının koyu / açık tema ayarına saygı duyan siteler için bir çözüm, Chrome'u karanlık modla sınırlı bir medya sorgusuyla hedeflemek ve aşağıdaki gibi alt piksel olmayan düzleştirmeye geçirmektir:
@media screen
and (-webkit-min-device-pixel-ratio: 0)
and (min-resolution: 0.001dpcm)
and (prefers-color-scheme: dark) {
body {
-webkit-font-smoothing: antialiased;
}
}
Sonuç :
Açıkta açıkta koyuda açıkta koyuda oluşturma fark etmeksizin çok daha tutarlı bir metin ağırlığı.
Öncesi ve sonrasının yan yana karşılaştırmasına göz atın:
-
GÜNCEL Mayıs 2018
-webkit-font-smoothing: subpixel-antialiasedartık Chrome'da hiçbir etkisi yoktur, ancak Safari'de yine de işleri büyük ölçüde geliştirir AMA SADECE RETINA'DA. Retina ekranlarında Safari'de bu olmadan metin ince ve tatsızdır, halbuki bununla birlikte metin uygun ağırlığa sahiptir. Ancak bunu Safari'de retina olmayan ekranlarda kullanırsanız (özellikle hafif değerlerde) metin bir felakettir. Bir medya sorgusu kullanmanızı şiddetle tavsiye ederiz:
@media screen and (-webkit-min-device-pixel-ratio: 2) {
body {
-webkit-font-smoothing: subpixel-antialiased;
}
}
Daha -webkit-font-smoothing: subpixel-antialiasedince kenar yumuşatılmış metinden en azından kısmen kaçınmak istiyorsanız, mevcut en iyi çözüm açıkça ayarlamaktır .
--tl; dr--
Varsayılan yazı tipi oluşturmanın alt piksel kenar yumuşatma kullandığı hem Safari hem de Chrome ile, yukarıdaki önerilerde olduğu gibi, translateZ kullanarak bir dönüşümü veya hatta yalnızca bir ölçek geçişini kullanmak için GPU tabanlı oluşturmayı zorlayan herhangi bir CSS, Safari ve Chrome'un otomatik olarak "vazgeçmesine neden olur" "alt piksel kenar yumuşatmalı yazı tipi yumuşatmada ve bunun yerine, özellikle Safari'de çok daha hafif ve daha ince görünen kenar yumuşatılmış metne geçin.
Diğer yanıtlar, yazı tipi yumuşatmayı daha ince, yayılmamış metne basitçe ayarlayarak veya zorlayarak sabit bir görüntü oluşturmayı sürdürmeye odaklanmıştır. Bana göre translateZ veya backface gizli kullanmak, metin oluşturma kalitesini önemli ölçüde düşürür ve metnin tutarlı kalmasını istiyorsanız en iyi çözüm ve daha ince metin kullanmak için sorun yok -webkit-font-smoothing: antialiased. Bununla birlikte, açıkça ayarlamanın -webkit-font-smoothing: subpixel-antialiasedaslında bir etkisi vardır - metin yine de biraz değişir ve GPU'da oluşturulan geçişler sırasında neredeyse gözle görülür şekilde daha incedir, ancak bu ayar olmadan gittiği kadar ince değildir. Öyleyse öyle görünüyor ki, düz antiailased metne geçişi en azından kısmen engelliyor.