@font-face için CSS boyut düzenlemesi

Artık bir web yazı tipi yüklenirken, doküman yazı tipi boyutlarını normalleştirmek ve yazı tipleri arasında geçiş yaparken düzen kaymasını önlemek üzere artık ölçeğini ayarlayabilirsiniz

Adam Argyle

font-size değerinin tutarlı bir 64px olduğu ve bu başlıkların her biri arasındaki tek farkın font-family olduğu aşağıdaki demoyu düşünün. Soldaki örnekler düzenlenmemiş ve tutarsız bir nihai boyuta sahip. Sağdaki örneklerde, 64px değerinin tutarlı bir nihai boyut olmasını sağlamak için size-adjust kullanılır.

Bu yayında, size-adjust adlı yeni bir CSS yazı tipi tanımlayıcısı incelenmektedir. Ayrıca, daha sorunsuz bir kullanıcı deneyimi, tutarlı tasarım sistemleri ve daha tahmin edilebilir sayfa düzeni için yazı tipi boyutlarını düzeltme ve normalleştirmenin birkaç yolu da gösterilmektedir. Önemli kullanım alanlarından biri, kümülatif düzen kaymasını (CLS) önlemek için web yazı tipi oluşturmayı optimize etmektir.

Sorun alanının etkileşimli demo'sunu burada bulabilirsiniz. Açılır menüden yazı tipini değiştirmeyi deneyin ve aşağıdakileri gözlemleyin:

1. Sonuçlardaki yükseklik farklılıkları.
2. Görsel olarak rahatsız edici içerik geçişleri.
3. Etkileşimli hedef alanları hareket ettirme (açılır menü etrafta sıçrar).

size-adjust ile yazı tiplerini ölçeklendirme

Söz dizimine giriş:

@font-face {
  font-family: "Adjusted Typeface";
  size-adjust: 150%;
  src: url(some/path/to/typeface.woff2) format('woff2');
}

1. Adjusted Typeface adlı özel bir yazı tipi oluşturur.
2. Her glifin ölçeğini varsayılan boyutunun% 150'sine çıkarmak için size-adjust kullanır.
3. Yalnızca içe aktarılan tek yazı tipini etkiler.

Yukarıdaki özel yazı tipini şu şekilde kullanın:

h1 {
  font-family: "Adjusted Typeface";
}

Sorunsuz yazı tipi değişimiyle CLS'yi azaltma

Aşağıdaki GIF'te, soldaki örnekleri ve yazı tipi değiştiğinde nasıl bir değişiklik olduğunu izleyin. Bu, tek bir başlık öğesinin yer aldığı küçük bir örnektir ve sorun oldukça belirgindir.

Yazı tipi oluşturmayı iyileştirmek için yazı tipi değiştirme harika bir tekniktir. Hızlı yüklenen bir sistem yazı tipi oluşturarak içeriği önce gösterin, ardından web yazı tipinin yüklenmesi bittiğinde bunu bir web yazı tipiyle değiştirin. Bu sayede iki dünyanın da en iyisini elde edersiniz: İçerik en kısa sürede görünür hale gelir ve kullanıcılarınızın içeriğe erişme süresinden ödün vermeden güzel bir stilize sayfa elde edersiniz. Ancak sorun şudur: Web yazı tipi yüklendiğinde, kutu yüksekliği boyutu biraz farklı olduğundan sayfanın tamamı kaydırılır.

@font-face kuralına size-adjust ekleyerek yazı tipi için genel bir karakter düzenlemesi belirler. Bunu doğru zamanlama, görsel açıdan minimum düzeyde bir değişikliğe, sorunsuz bir değişime yol açar. Sorunsuz bir değişim oluşturmak için manuel olarak ayarlayın veya Malte Ubl tarafından oluşturulan bu boyut ayarlama hesaplayıcısını deneyin.

Bu gönderinin başında, yazı tipi boyutu sorunu deneme yanılma yoluyla düzeltildi. size-adjust, Cookie ve Arial'deki aynı başlık Press Start 2P'teki gibi doğal olarak aynı 64px'ı oluşturana kadar kaynak kodda yönlendirildi. İki yazı tipini bir hedef yazı tipi boyutuna hizaladım.

@font-face {
  font-family: 'Adjusted Arial';
  size-adjust: 86%;
  src: local(Arial);
}

@font-face {
  font-family: 'Cookie';
  size-adjust: 90.25%;
  src: url(...woff2) format('woff2');
}

Yazı tipleri kalibre ediliyor

Yazar olarak, yazı tipi ölçeğinin normalleştirilmesiyle ilgili kalibrasyon hedeflerini siz belirlersiniz. Times, Arial veya bir sistem yazı tipini normalleştirebilir, ardından özel yazı tiplerini eşleşecek şekilde ayarlayabilirsiniz. Alternatif olarak, yerel yazı tiplerini indirdiğiniz yazı tipleriyle eşleşecek şekilde ayarlayabilirsiniz.

size-adjust kalibrasyonu için stratejiler:

1. Uzak hedef:
   Yerel yazı tiplerini indirilen yazı tiplerine göre ayarlayın.
2. Yerel hedef:
   İndirilen yazı tiplerini yerel hedef yazı tiplerine göre ayarlayın.

1. Örnek: Uzak hedef

Yerel olarak kullanılabilen bir yazı tipini, uzak bir src özel yazı tipiyle eşleşecek şekilde ayarlayan aşağıdaki snippet'i düşünün. Kalibrasyon hedefi uzak bir özel yazı tipidir (ör. marka yazı tipi):

@font-face {
  font-family: "Adjusted Regular Arial For Brand";
  src: local(Arial);
  size-adjust: 90%;
}

@font-face {
  font-family: "Rad Brand";
  src: url(some/path/to/a.woff2) format('woff2');
}

html {
  font-family: "Rad Brand", "Adjusted Regular Arial For Brand";
}

Bu örnekte, yerel Arial yazı tipi, sorunsuz bir değişim için yüklenen özel yazı tipini beklerken ayarlanır.

Bu stratejinin avantajı, tasarımcılara ve geliştiricilere boyutlandırma ve yazı tipi için aynı yazı tipini sunmasıdır. Marka, kalibrasyon hedefidir. Bu, tasarım sistemleri için harika bir haber.

Malta'nın hesap makinesinin hedef olarak bir marka yazı tipine sahip olması da aynı şekilde etkilidir. Bir Google Yazı Tipi seçtiğinizde, Gboard'u sorunsuz bir şekilde değiştirecek şekilde nasıl ayarlayacağınız hesaplanır. Hesap makinesindeki Roboto CSS'nin bir örneğini aşağıda görebilirsiniz.

@font-face {
    font-family: "Roboto-fallback";
    size-adjust: 100.06%;
    src: local("Arial");
}

Tamamen platformlar arası bir ayarlama oluşturmak için marka yazı tipi olması ihtimaline karşı 2 ayarlanmış yerel yedek yazı tipi sağlayan aşağıdaki örneği inceleyin.

@font-face {
    font-family: "Roboto-fallback-1";
    size-adjust: 100.06%;
    src: local("Arial");
}

@font-face {
    font-family: "Roboto-fallback-2";
    size-adjust: 99.94%;
    src: local("Arimo");
}

@font-face {
  font-family: "Roboto Regular";
  src: url(some/path/to/roboto.woff2) format('woff2');
}

html {
  font-family: "Roboto Regular", "Roboto-fallback-1", "Roboto-fallback-2";
}

2. örnek: Yerel hedef

Bir marka özel yazı tipini GPC'ye uyacak şekilde ayarlayan aşağıdaki snippet'i göz önünde bulundurun:

@font-face {
  font-family: "Rad Brand - Adjusted For Arial";
  src: url(some/path/to/a.woff2) format('woff2');
  size-adjust: 110%;
}

html {
  font-family: "Rad Brand - Adjusted For Arial", Arial;
}

Bu strateji, herhangi bir ayarlama yapmadan oluşturma ve ardından gelen yazı tiplerini eşleşecek şekilde ayarlama avantajına sahiptir.

ascent-override, descent-override ve line-gap-override ile daha ince ayar

Tasarımınız veya yükleme stratejileriniz için genel simge ölçeklendirmesi yeterli ayar değilse size-adjust ile birlikte kullanılabilen bazı hassas ayar seçenekleri aşağıda verilmiştir. ascent-override, descent-override ve line-gap-override özellikleri şu anda Chromium 87 ve sonraki sürümler ile Firefox 89 ve sonraki sürümlerde uygulanmaktadır.

ascent-override

ascent-override açıklayıcısı, bir yazı tipinin referans değeri üzerindeki yüksekliği tanımlar.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  ascent-override: 71%;
}

Kırmızı başlık (düzenlenmemiş), büyük A ve O harflerinin üzerinde boşluk içerir. Mavi başlık ise büyük harf yüksekliği, genel sınırlayıcı kutuya tam olarak oturacak şekilde ayarlanmıştır.

descent-override

descent-override açıklayıcısı, yazı tipinin referans değerinin altındaki yüksekliği tanımlar.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  descent-override: 0%;
}

D ve O yazı tabanlarının altında boşluk bulunan kırmızı başlık (düzenlenmemiş) aksine harflerin yazı tabanına tam olarak oturması için mavi başlık düzenlenmiştir.

line-gap-override

line-gap-override tanımlayıcısı, yazı tipi için satır aralığı metriğini tanımlar. Bu, yazı tipi için önerilen satır aralığı veya harici ara yazıdır.

@font-face {
  font-family: "Line Gap Adjusted Arial";
  src: local(Arial);
  line-gap-override: 50%;
}

Kırmızı başlıkta (düzenlenmemiş) line-gap-override yoktur, temelde 0% değerindedir. Mavi başlık ise %50 oranında yukarı doğru ayarlanmıştır. Bu sayede harflerin üstünde ve altında uygun şekilde alan oluşturulmuştur.

Tüm unsurların birleşimi

Bu geçersiz kılma işlemlerinin her biri, web'in güvenli metin sınırlayıcı kutusundan fazla bilgiyi kırpmak için ek bir yol sunar. Metin kutusunu tam sunum için uyarlayabilirsiniz.

Sonuç

@font-face size-adjust CSS özelliği, yazı tipi değiştirme deneyimini iyileştirmek ve böylece kullanıcılarınız için düzen değişikliğini önlemek amacıyla web düzenlerinizin metin sınır kutucuğunu özelleştirmenin heyecan verici bir yoludur. Daha fazla bilgi edinmek için şu kaynaklara göz atın:

• CSS Fonts 5. Düzey Özellikleri
• MDN'de Boyut Ayarlama
• Sorunsuz @font-face generator değişimi
• web.dev'de Cumulative Layout Shift (CLS)
• Yazı Tipi Yükleme Etkisini Azaltmanın Yeni Yolu: CSS Yazı Tipi Tanımlayıcıları

Unsplash'taki Kristian Strand tarafından çekilen fotoğraf