Catalina, macOS'e yeni bir birleşik değişken sistem yazı tipi sunuyor.
CSS Yazı Tipi Modülü Düzey 4 spesifikasyonunun "system-ui" bölümü, geliştiricilerin yerleşik, turbo için optimize edilmiş, yerelleştirilmiş, mega yüksek kaliteli, indirmeye gerek olmayan, varsayılan işletim sistemi yazı tipini doğrudan sitelerinde ve uygulamalarında kullanmalarına olanak tanıyan bir system-ui
yazı tipi anahtar kelimesini tanımlar.
body {
font-family: system-ui;
}
Bu yazı biçimi seçimi, "bu kullanıcının mevcut yerel ayarı için varsayılan sistem yazı tipini kullan" ifadesine benzer.
macOS'teki system-ui
yazı tipi San Francisco'dur. San Francisco, bir tasarım ekibinin incelediği, test ettiği ve yakın zamanda yeni sürüme geçirdiği bir yazı tipidir. İlk olarak Catalina'daki yeni heyecan verici değişken yazı tipi özelliklerini ele alacağız, ardından birkaç hataya ve Chromium mühendislerinin bunları nasıl çözdüğüne değineceğiz.
Bu gönderide, değişken yazı tipleri hakkında bilginiz olduğu varsayılmıştır. Bu mümkün değilse Web'de değişken yazı tiplerine giriş bölümüne ve aşağıdaki videoya göz atın.
Tarayıcı uyumluluğu
Bu yazının yazıldığı sırada system-ui
, Chromium (56 sürümünden itibaren), Edge (79'dan itibaren), Safari (11'den itibaren) ve Firefox'tan (43'ten itibaren) ancak -apple-system
anahtar kelimesinden destek almıştır. Güncellemeler için Değişken yazı tipleri kullanabilir miyim? bölümüne bakın.
Yeni güçler
Catalina'nın sistem yazı tipine getirdiği yeni özellikler, Chromium 83 sürümünden itibaren web geliştiricilerinin kullanımına sunuldu. system-ui
yazı tipinin artık daha fazla değişken ayarı var: optik boyutlandırma ve 2 benzersiz ağırlık ayarlaması:
h1 { font-family: system-ui; font-weight: 700; font-variation-settings: 'wght' 750 ; }
h1 { font-family: system-ui; font-weight: 700; font-variation-settings: 'wght' 750, 'opsz' 20, 'GRAD' 400, 'YAXS' 400 ; }
Mojave'de system-ui
yalnızca wght
ayarları olan değişken bir yazı tipidir. system-ui
ise Catalina'da wght
, opsz
, GRAD
ve YAXS
ayarlarına sahip değişken bir yazı tipidir.
Progresif geliştirme tasarımı için kıymetli fırsatlar olduğunu düşünüyorum. Dilerseniz sistem yazı tipinin inceliklerini inceleyebilirsiniz.
wght
0
ile 900
arasında bir yazı tipi ağırlığını kabul eder ve tüm karakterlere eşit şekilde uygulanır.
/* 0-900 */
font-variation-settings: 'wght' 750;
opsz
Optik boyutlandırma, aralık veya harf aralığına benzerdir, ancak boşluk matematik yerine insan gözü tarafından yapılır. 19
veya daha düşük bir değer metin ve gövde metni aralığı için kullanılırken 20
veya üstü, görüntüleme başlıkları ve başlıkları arasında boşluk bırakmak için kullanılır.
/* 19 or 20 */
font-variation-settings: 'opsz' 20;
GRAD
Ağırlığa benzer, ancak yatay boşluğa dokunulmaz. 400
ile 1000
arasındaki değerleri kabul eder.
/* 400-1000 */
font-variation-settings: 'GRAD' 500;
YAXS
Glifi dikey olarak genişletir. 400
ile 1000
arasındaki değerleri kabul eder.
/* 400-1000 */
font-variation-settings: 'YAXS' 500;
Seçenekleri birleştirme
Birkaç satırlık CSS ile yazı tipi ayarlarını değiştirerek kalın bir hale getirebilir veya diğer ilginç kombinasyonları deneyebiliriz:
font-weight: 700;
font-weight: bold;
font-variation-settings: 'wght' 750, 'YAXS' 600, 'GRAD' 500, 'opsz' 20;
İşte tam da bu şekilde, macOS'teki Chromium kullanıcıları başka eğlenceli ayarlarla birlikte yükseltilmiş, özel 750 ağırlığınızı görüyor 👍
Playground
Arızanın düzenlenebilir bir kopyasını almak için aşağıdaki Arıza bölümünde Düzenlenecek Remiks'i tıklayın ve ardından, yazı tipini nasıl etkilediğini görmek için yeni font-variation-settings
seçeneklerini düzenleyin. Bu hatanın yalnızca macOS Catalina cihazıyla çalışacağını unutmayın.
macOS 10.15, sistem yazı tipine yeni özellikler ekledi ve macOS 10.15'te Chromium hata izleyiciye yanıltıcı bir system-ui
hatası kaydedildi. İlişkili olup olmadıklarını merak ediyorum!
Ek: system-ui
regresyonu
Bu hikaye farklı bir hatayla başlıyor: #1005969. Bu durum, system-ui
yazı tipi aralığı dar ve sıkışık göründüğünden macOS 10.15 ile ilgili olarak bildirildi.
Arka plan
macOS 10.14'te, boyutu büyütüldüğünde veya düştüğünde paragraflarınızın veya başlıklarınızın nasıl farklı görünümlü bir yazı tipine "yerleştirildiği"ni hiç fark ettiniz mi?
Mojave'de (macOS 10.14), system-ui
yazı tipi, hedef yazı tipi boyutuna bağlı olarak iki yazı tipi arasında geçiş yaptı. Metin 20px
altındayken macOS, "San Francisco Metni" seçeneğini kullandı. Metin 20px
veya daha büyük olduğunda macOS "San Francisco Display" özelliğini kullandı. Optik boyutlandırma, statik olarak iki ayrı yazı tipinde oluşturuldu.
Catalina (macOS 10.15), San Francisco için yeni bir birleşik değişken yazı tipi kullanıma sundu. Artık "Metin" ve "Görüntülü" öğelerinin yönetilmesi gerekmiyor. Ayrıca, daha önce açıklanan yeni varyasyon ayarını opsz
da kazanmıştır.
h1 {
font-variation-settings: 'opsz' 20;
}
Maalesef yeni Catalina yazı tipindeki varsayılan opsz
değeri 20
ve Chromium mühendisleri sistem yazı tipine opsz
uygulamak için hazır değildi. Bu durum, daha küçük boyutların çok dar gösterilmesine neden oldu.
Bunu düzeltmek için Chromium'un, opsz
öğesini sistem yazı tipine doğru şekilde uygulaması gerekiyordu. Bu nedenle, 1005969 numaralı sorun giderildi. Zafer! Yoksa...?
Henüz tamamlanmadı
Sorun burada oluştu: Chromium opsz
özelliğini uyguladı ancak bir şey düzgün görünmüyordu. Mac'teki sistem yazı tiplerinde, yatay boşluk bırakmasını sağlayan trak
adlı ek bir yazı tipi tablosu bulunur. Chromium mühendisleri sorunu düzeltmeye çalışırken macOS'te bir CTFontRef
nesnesinden yatay metrikler alırken trak
metriklerinin metrik sonuçlarına zaten dahil edildiğini fark etti. Chromium'un şekil verme kitaplığı HarfBuzz
, trak
değerlerinin henüz hesaba katılmadığı metriklere ihtiyaç duyar.
Dahili olarak Skia (aynı adın yazı tipi değil, grafik kitaplığı) hem CoreGraphics
kapsamındaki CGFontRef
sınıfını hem de CoreText
kapsamındaki CTFontRef
sınıfını kullanır. Bu nesneler arasındaki dahili dönüşümler (geriye dönük uyumluluğu korumak ve her iki sınıfta gerekli API'lere erişmek için kullanılır) nedeniyle, Skia belirli durumlarda ağırlık bilgilerini kaybeder ve kalın yazı tipleri çalışmayı durdurur. Bu, 1057654 numaralı sorun sayfasında takip edildi.
Chromium hâlâ macOS 10.11'i desteklediği için Skia'nın macOS 10.11'i desteklemesi gerekmektedir. 10.11'de"San Francisco Metin " ve"San Francisco Ekranı" yazı tipleri değişken yazı tipleri bile değildi. Aksine, bunların her biri, mevcut her ağırlık için ayrı bir yazı tipi ailesiydi. Bir noktada glif kimlikleri birbirleriyle senkronize değildi. Yani Skia, "San Francisco Metni" ile metin şekillendirme (metni, çizilebilecek gliflere dönüştürme) yaptıysa, "San Francisco Display" ile çizildiğinde bu metin anlamsız olur ve bunun tersi de geçerlidir. Ayrıca Skia farklı boyutta bir macOS talep etse bile diğer sürüme geçebilir. Her zaman yazı tiplerinden birini kullanmak ve yalnızca ölçeklendirmek (daha büyük boyut istemek yerine ölçeğini büyütmek için bir matris kullanarak) gerekebilir. Ancak CoreText
, sbix (renk emojisi) gliflerini yukarı (yalnızca aşağı) ölçeklendirmeyle ilgili bir sorun yaşıyor. Bu, bundan biraz daha karmaşıktır. CoreText
, matris uygulamasından sonra dikey alanı sınırlandırıyor gibi görünüyor. Bu da 45 derecelik açılarda emoji çizememesiyle ilgili görünüyor. Emojinizin büyük görünmesini istiyorsanız her halükarda emojinizin büyük halini almak için yazı tipinin bir kopyasını oluşturmanız gerekir.
Dolayısıyla Chromium, aynı temel yazı tipi verilerinin kullanıldığından emin olarak dahili olarak farklı boyutlarda CTFont
nesnelerin kopyalarını oluşturmak için CGFont
öğesini CTFont
öğesinden çıkardı, ardından CGFont
öğesinden yeni bir CTFont
işlemi gerçekleştirdi (CGFont
nesne boyuttan bağımsızdır, sihirli geçiş CoreText
düzeyinde gerçekleşir). Bu durum 10.154'e kadar sorunsuz çalıştı. 10.15'te bu gidiş dönüş çok fazla bilgi kaybetti ve bu da kilo sorununa yol açtı. Flutter, ağırlık sorununu fark etti ve yeni CTFont
öğesini doğrudan orijinal CTFont
öğesinden oluşturmak ve CoreText
ürününde eski ancak belgelenmemiş bir özelliği kullanarak optik boyutu doğrudan kontrol etmek için yeniden boyutlandırmayla ilgili alternatif bir düzeltme yapıldı. Bu, 10.11'de çalışır durumda olmaya devam eder ve diğer sorunları (optik boyutu açıkça varsayılan değere ayarlamak gibi) düzeltir.
Ancak bu şekilde yazı tipindeki CoreText
"sihirli" özelliğinin daha büyük bir kısmını korur. Bunlardan biri, trak
tablosu (Chromium'un halihazırda bildirilmemiş başka bir özelliği engellemeye çalıştığı uygulama) dışında glif ilerlemelerinde bazı değişiklikler yapmaya devam ettiği görülüyor.
CGFont
bu "sihir"den hiçbirini yapmıyor. Peki Chromium, CTFont
üzerinde CGFont
indirimden yararlanarak sadece ilerleme elde etmek için kullanabilir. CoreText
ürününün yazı tiplerini başka şekillerde de değiştirdiği bilindiğinden, maalesef bu işe yaramaz. Örneğin, küçük emojilerin gerçekten istediğinizden biraz daha büyük olmasını sağlar (boyutunu biraz artırır). CGFont
adlı kullanıcının bundan haberi olmadığı için emojileri tek bir boyutta ölçtüğünüz için sbix tabanlı emojileriniz birbirine çok yakın olur. Ancak CoreText
emojileri belirli bir boyutta büyütür. Chromium, CTFont
ilerlemelerini istiyor ancak bunları takip etmeden ve tercihen başka hiçbir endişe olmadan istiyor.
Boşluk bırakma sorununun çözümü, birbirine bağlı Blink ve Skia düzeltmelerinin yapılmasını gerektirdiğinden Chromium mühendisleri sorunu "geri döndüremedi". Chromium mühendisleri, Skia'da yazı tipiyle ilgili bir kod yolunu değiştirmek için farklı bir derleme bayrağı kullanmayı denedi. Bu şekilde kalın yazı tipi sorunu düzeltildi, ancak boşluk bırakma sorunu geri alındı.
Çözüm
Sonuç olarak Chromium, her iki sorunu da düzeltmek istedi. Chromium artık yatay metrikleri doğrudan sistem yazı tipinin yazı tipi tablolarındaki ikili verilerden almak için HarfBuzz yerleşik yazı tipi OpenType yazı tipi metrikleri işlevlerini kullanmaya başlıyor. Chromium, bunu kullanarak yazı tipinin trak
tablosu olduğunda (emoji yazı tipinin olmadığı durumlar hariç) CoreText
ve Skia'nın kullanımını kaldırıyor.
Bu süre zarfında, Skia Sorunu No.10123 hâlâ mevcuttur. Bu sorunu Skia'da tamamen düzeltmeyi takip edebilir ve HarfBuzz
ile uygulanacak mevcut düzeltme yerine Skia'yı sistem yazı tipi metriklerini geri almak için oradan alabilirsiniz.