Okuyucuların bir sayfayı kullanmak için sözcüklere ihtiyaç duyduğu durumlarda yedek metni gecikmeden gösterin. Geçici gizlemeyi yalnızca küçük ve gerekçelendirilmiş, yazı tipine bağlı bir öğe için seçin. Mac’te bakımını yaptığınız bir sayfa için bu kılavuz, bir politika seçmeyi ve bunun metin akışına etkisini sınamayı açıklar.

Bir yazı tipi yüklenirken gerçekte ne değişir?

Yedek yazı tipi, istenen yazı tipi kullanılamaz durumdayken aynı metni başka bir yazı karakteriyle işler. Metnin geçici olarak gizlenmesi, yazı tipi yüklemesinin engelleme süresine karşılık gelir: tarayıcı görünmez bir yedek yazı tipinin düzenini oluşturur. Yükleme zaman çizelgesi, tarayıcının indirilebilir yazı tipini ilk kez kullanmayı denemesiyle başlar. MDN’nin font-display başvurusu bu aşamaları açıklar.

Bir sayfayı incelerken bu ayrım önemlidir. Boş bir başlık, son boyutlarının ayrıldığını göstermez. Engelleme süresi boyunca tarayıcı hâlâ yedek yazı tipinin düzenini kullanır; harfleri gizlemek, indirilen yazı tipinin sonunda oluşturacağı satır sonlarını belirlemez. Görünürlüğü ve düzen kararlılığını ayrı ayrı değerlendirin.

İlgili denetim, bir @font-face kuralının içindeki font-display tanımlayıcısıdır. Sıradan bir paragraf seçicisine değil, yazı tipi yüzü tanımına aittir. Bu, sayfa yazarlığıyla ilgili bir tercihtir: bakımını yaptığınız sayfada bulunan stil sayfasını veya yazı tipi ayarlarını kullanın. MDN, font-display’in nerede geçerli olduğunu belgeler.

Okuyucunun görevine hangi font-display değeri uyar?

Düzenleme yapmadan önce iki şeye karar verin: sözcüklerin başka bir yazı tipinde hemen görünmesi gerekip gerekmediğine ve bu yazı tipinin daha sonra değiştirilmesinin kabul edilebilir olup olmadığına. Aşağıdaki tablo, belgelenmiş yükleme sürelerini soyut bir herkese açık sayfa için seçeneklere dönüştürür. MDN’nin değer tanımları temel davranışı açıklar.

Değer Yazı tipi yüzü kullanılamazken Yedek yazı tipini değiştirme fırsatı Uygun başlangıç noktası
swap Son derece kısa engelleme, ardından görünür yedek yazı tipi Sınırsız değiştirme süresi Amaçlanan yazı karakterinin önemli olduğu kısa bir başlık
fallback Son derece kısa engelleme, ardından görünür yedek yazı tipi Kısa değiştirme süresi Erken değişimin kabul edilebilir olduğu okuma metni
optional Son derece kısa engelleme Değiştirme süresi yok İlk görünen yazı tipini korumanın en önemli olduğu metin
block Kısa bir engelleme süresince görünmez yedek yazı tipi, ardından görünür yedek yazı tipi Sınırsız değiştirme süresi Belirli bir yazı tipine bağımlılığı olan küçük bir öğe
auto Tarayıcının seçtiği politika Tarayıcının seçtiği politika Tarayıcının varsayılan davranışını kabul etme

Bunlar, yapılandırabileceğiniz kesin süreler değil, politika kategorileridir. W3C’nin güncel CSS Fonts Level 4 çalışma taslağı tipik süreler önerir, ancak tarayıcılar arasında farklılıklara açıkça izin verir. Ayrıca block değerini, kullanılabilirlik için belirli bir yazı tipinin gerektiği küçük metin parçalarıyla sınırlar. Yalnızca başlığın görünüşünü tercih etmek, onu boş bırakmak için zayıf bir gerekçedir. W3C: Yazı Tipi Yüzü Başına Görüntülemeyi Denetleme.

“Sample Collection” adlı bir başlığı, “Section One” adlı bir gezinme öğesini ve birkaç paragrafı olan temsili bir sayfa için okuma metninde fallback değerini değerlendirmekle başlayın. Yazı karakterinin sonunda kullanılmasının önemli olduğu kısa başlık için swap değerini değerlendirin. İlk görünür işlemenin korunmasına öncelik veriyorsanız optional değerini seçin. Bu öneriler, belgelenmiş politikaları okuyucunun görevine uygular; ölçülmüş sonuçlar değildir.

Görünürlük ve yeniden akış karar aracını kullanın

Her metin rolünü ayrı ayrı değerlendirin. Bir gezinme etiketiyle paragraf aynı aileyi kullanabilir, ancak düzen kısıtlamaları farklıdır. Sorulması gereken, yazı tipi değişikliğinin birinin göreve devam etmesini engelleyip engellemediği ya da yalnızca görünüşü değiştirip değiştirmediğidir.

  1. Sayfayı yedek yazı tipinde okuyun. Birisi “Section One” ifadesini anlayabiliyor, başlığı belirleyebiliyor ve paragrafları okuyabiliyor mu? Öyleyse görünür yedek yazı tipi uygun bir başlangıçtır.
  2. Yazı tipi değişimini gözlemleyin. Başlıkta yeni bir satır oluşuyor mu? Etiketler satır kaydırıyor mu? Sonraki paragrafın yeri değişiyor mu?
  3. Kabul edilebilir değiştirme süresini seçin. Geç bir değiştirme hâlâ kabul edilebilirse swap, yalnızca erken bir değiştirme uygunsa fallback, ilk görünen yazı tipinin korunması gerekiyorsa optional kullanın.
  4. Boş metin için somut bir gerekçe arayın. block değerini seçmeden önce, yedek yazı tipinde neyin kullanılamaz hâle geleceğini ve bu bağımlılığın neden ortadan kaldırılamayacağını belirleyin.

Örneğin, “Sample Collection” ifadesinin yedek yazı tipinde tek satıra, indirilen yazı tipinde iki satıra sığdığını varsayalım. Başlığın varsayımsal satır yüksekliği 40 piksel ise, aralıkların değişmediği kabulüyle ek satır yüksekliğine 40 piksel ekler. Altındaki içerik de buna bağlı olarak yer değiştirebilir. Bunlar tarayıcı ölçümleri değil, örnek amaçlı girdilerdir.

Geçici gizleme bu uyumsuzluğu çözmez. Uygulanabilir seçenekler, yedek yazı tipi eşleşmesini iyileştirmek, sınamadan sonra düzeni ayarlamak veya geç değiştirmeyi önleyen bir politika seçmektir. Güncel W3C taslağındaki optional davranışına göre, yedek metin çizildikten sonra isteğe bağlı yazı tipi yüzü, sayfanın ömrü boyunca onun yerini almamalıdır. W3C’nin optional tanımı.

Mac’te tercih nasıl uygulanır ve sınanır?

Stil sayfasını düzenleyebildiğiniz ve mevcut web yazı tipinin zaten başarıyla yüklendiği bir sayfa kullanın. Bu karşılaştırma için gerçek yazı tipi dosyası referansını koruyun; yeni bir yazı tipi indirmeye veya alternatif bir varlığa gerek yoktur.

Sayfanın kaynak stil sayfasında veya desteklenen yazı tipi yapılandırmasında ilgili @font-face tanımını bulun. font-display tanımlayıcısını font-display: fallback; gibi aday bir değere ayarlayın. Sınamanın sayfanın gerçekten istediği yazı tipi yüzlerini kapsaması için ağırlık ve stillerle kullanılan diğer tanımları gözden geçirin. Tanımlayıcının yeri MDN’nin font-display örneğinde gösterilmiştir.

Mac’inizde Chrome’da DevTools’u açmak için Command + Option + I tuşlarına basın. Alternatif olarak hedef metne sağ tıklayıp Inspect seçeneğini belirleyin; Elements panelindeki Styles bölümü, uygulanan CSS’i gösterir. Chrome’un DevTools’u açma yönergeleri her iki yolu da belgeler.

Her stil sayfası değişikliğinden sonra aşağıdaki karşılaştırmayı yapın. Farkları yazı tipi yükleme politikasına bağlayabilmek için pencere genişliğini ve yakınlaştırma düzeyini sabit tutun.

  1. Network bölümünü açın, Disable cache seçeneğini etkinleştirin, Throttling menüsünden daha yavaş bir ön ayar seçin ve sayfayı yeniden yükleyin. Yazı tipi isteklerine odaklanmak için Font filtresini kullanın.
  2. Başlığı, gezinme öğesini ve paragrafın başlangıcını izleyin. Metnin boş başlayıp başlamadığını, yedek yazı tipinde görünüp görünmediğini ve sonradan satır sonlarının değişip değişmediğini kaydedin.
  3. Geçişi incelemek için çok hızlı oluyorsa, Network paneli ayarlarında Capture screenshots seçeneğini etkinleştirin ve yükleme sırasını incelemek üzere sayfayı yeniden yükleyin.
  4. Hız sınırlamasını devre dışı bırakın ve Disable cache seçeneğini kapatın. Normal koşullarda tekrarlanan ziyareti karşılaştırmak için sayfayı yeniden yükleyin. Chrome’un Network özellikleri başvurusu bu denetimleri belgeler.

Kullanılamayan yazı tipi durumunu ayrıca sınayın. Network bölümünde gerçek yazı tipi isteğine sağ tıklayın ve Block request seçeneğini belirleyip sayfayı yeniden yükleyin. Chrome, eşleşen kalıbı Request conditions bölümünde listeler. Sözcüklerin okunabilir hâle geldiğini ve sayfanın yedek yazı tipiyle kullanılabilir kaldığını denetleyin. Ardından sınama kalıbını kaldırın veya devre dışı bırakın. Chrome’un request conditions belgeleri, istek engellemeyi ve engellenen isteklerin nasıl belirleneceğini açıklar.

Mac’te kullanmayı amaçladığınız gezinme ortamının bir parçasıysa sayfa incelemesini Safari’de de tekrarlayın. Chrome sınamasını yalnızca o tarayıcının işlemesine dair kanıt olarak değerlendirin; başka tarayıcılarda zamanlamanın aynı olduğunun kanıtı saymayın: belirtim tarayıcılar arasında farklılıklara izin verir. Tarayıcıyı, aday değeri, başlangıçtaki görünürlüğü ve gözlemlenen satır kaymasını içeren kısa bir karşılaştırma notu tutun.

Görünür yedek yazı tipi düzeni fazla değiştirirse ne yapmalı?

Gerçek metin ve kullanılabilir genişlikle başlayın. Kısa etiketleri, en uzun başlığı ve birkaç paragraf satırını karşılaştırın. Web yazı tipine görsel olarak benzeyen bir yedek yazı tipi bile karakter genişliklerinde farklılık gösterebilir ve farklı satır kaymalarına yol açabilir.

Daha yakın bir eşleşme için size-adjust, karakter ilerlemeleri de dâhil olmak üzere bir yazı tipi yüzünün glif dış çizgilerini ve ölçülerini ölçeklendirir. MDN, yerel bir yedek yazı tipi yüzü tanımlamayı ve bunu birincil web yazı tipiyle daha iyi eşleşecek şekilde ayarlamayı gösterir. Gerçek yazı tipi çiftiniz için uygun bir yüzde belirleyin; belgelerdeki örnek yüzde evrensel bir ayar değildir. MDN: size-adjust.

Dikey ölçümler ayrıca denetlenmelidir. ascent-override tanımlayıcısı, satır kutularının düzeninde kullanılan taban çizgisinin üzerindeki ölçüyü denetler; ancak MDN şu anda bunun sınırlı kullanılabilirliğe sahip olduğunu belirtiyor. Bu ayarlamayı bir iyileştirme olarak değerlendirin ve desteklemeyen tarayıcılarda da okunabilir bir yedek düzeni koruyun. MDN: ascent-override.

Metin şekillendirmeyi tarayıcıya bırakın. Her karakteri ayrı ayrı değiştirerek veya ölçerek başlığı sabitlemeye çalışmayın. CSS yazı tipi eşleştirmesi, birleştirici işaret içeren temel karakter gibi harf kümeleri için özel işlem içerir. Tam etiketleri ve satırları gerçek düzenlerinde inceleyin. W3C: Küme eşleştirme.

Ön yükleme veya yazı tipi yükleme kitaplığı kararı değiştirir mi?

Ön yükleme, kaynağın keşfedilmesini sağlar. WHATWG HTML Standardı, preload değerini mevcut gezinme sırasında gerekli olması beklenen bir kaynağı önceden alıp önbelleğe koymak olarak tanımlar. Yazı tipi görüntüleme politikanızı seçmez. Bunu yalnızca kabul edilebilir görünür davranışı seçtikten sonra değerlendirin; daha erken getirme, yazı tipi yüzü hâlâ kullanılamaz durumdayken ne olacağına karar vermenin yerini tutmaz. WHATWG: Link türü preload.

Sıradan sayfa metni için CSS ile başlayın. Mevcut bir proje Font Face Observer kullanıyorsa, belgelenmiş load() yöntemi yazı tipi yüklendiğinde çözümlenen, yükleme başarısız olduğunda reddedilen bir promise döndürür. Aile adı ve isteğe bağlı ağırlık, stil ve genişlik açıklaması istenen yazı tipi yüzüyle eşleşmelidir. Kitaplık, varsayılan karakterleri yazı tipinde bulunmadığında uygun sınama metni sağlamayı da belgeler. Font Face Observer belgeleri.

Kitaplığın başarılı geri çağrısı bir yükleme sinyalidir; neyin görünür olacağını uygulamanız belirler. Özel mantık metni gizliyorsa okunabilir yedek yazı tipini geri getiren bir hata yolu tanımlayın. Aksi takdirde başarısız yükleme, uygulamanın gizleme kuralını yürürlükte bırakabilir. Bu, kitaplığın belgelenmiş başarı ve hata yollarından çıkarılan bir uygulama önerisidir.

Yerel API’nin sınırı benzerdir. document.fonts.ready, kullanılan yazı tiplerine yönelik yükleme ve düzen işlemleri tamamlandığında yerine getirilir; bu küme, fırsatını kaçıran isteğe bağlı yüzler de dâhil olmak üzere tanımlanmış tüm yazı tiplerinden farklı olabilir. Dolayısıyla amaçlanan her yazı tipi yüzünün görünür olduğunu kanıtlamaz. MDN: Document fonts özelliği.

Benzer şekilde document.fonts.load() için isteğe bağlı metin bağımsız değişkeni, Unicode aralıkları üzerinden eşleşen yüzleri seçer; tek tek gliflerin kapsamını denetlemez. Yüklemenin tamamlanmasıyla örneğin tamamının doğru görüntülenmesi ayrı ayrı denetlenmelidir. MDN: FontFaceSet load() yöntemi.

Aynı sayfanın yavaş yüklenme, yazı tipinin kullanılamaması ve tekrarlanan yükleme sürümlerini inceleyerek politikayı seçin. Sıradan sözcükleri okunabilir tutun, geç değiştirmenin kabul edilebilir olup olmadığına açıkça karar verin ve geçici gizlemeyi yalnızca küçük bir öğenin kanıtlanmış bir yazı tipi bağımlılığı bulunduğunda kabul edin. Sonuç, her sınanan koşulda birinin “Sample Collection” ifadesini rahatça okumaya devam etmesini sağlamalıdır.

Kaynaklar