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

Artık web yazı tipleri yüklenirken yazı tipi ölçeğini ayarlayarak doküman yazı tipi boyutlarını normalleştirebilir ve yazı tipleri arasında geçiş yaparken düzen kaymasını önleyebilirsiniz.

font-size'nin tutarlı bir 64px olduğu ve bu üstbilgilerin her biri arasındaki tek farkın font-family olduğu aşağıdaki demo'yu düşünün. Soldaki örnekler ayarlanmamıştır ve tutarsız bir nihai boyuta sahiptir. 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 bir glifi varsayılan boyutunun% 150'sine ölçeklendirmek 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 öğesi içeren küçük bir örnektir ve sorun çok belirgindir.

Yazı tipi oluşturmayı iyileştirmek için kullanabileceğiniz mükemmel bir teknik yazı tipi değiştirmedir. İçeriği ilk olarak göstermek için hızlı yüklenen bir sistem yazı tipi oluşturun, ardından web yazı tipi yüklendiğ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 ve 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 hedef yazı tipi boyutuna göre 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ı tiplerini kalibre etme

Yazar olarak, yazı tipi ölçeğini normalleştirmek için 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 kalibrasyonuyla ilgili 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ılabilir bir yazı tipini, uzak bir src özel yazı tipiyle eşleşecek şekilde boyutlandıran aşağıdaki snippet'i inceleyin. 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.

Malte'nin hesap makinesi de hedef olarak bir marka yazı tipine sahiptir. Bir Google yazı tipi seçtiğinizde Arial'ın nasıl ayarlanacağını hesaplar ve sorunsuz bir şekilde geçiş yapar. Aşağıda, hesap makinesinden Roboto CSS örneği verilmiştir. Bu örnekte Arial yüklenir ve "Roboto-yedek" olarak adlandırılır:

@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 markanın özel yazı tipini Arial ile eşleşecek şekilde ayarlayan aşağıdaki snippet'i inceleyin:

@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 stratejinin avantajı, herhangi bir ayarlama yapmadan oluşturma ve ardından gelen yazı tiplerini eşleşecek şekilde ayarlamadır.

ascent-override, descent-override ve line-gap-override ile daha hassas ayarlama

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ümlerde ve Firefox 89 ve sonraki sürümlerde uygulanmaktadır.

ascent-override

ascent-override tanımlayıcısı, bir yazı tipinin taban çizgisinin ü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ıkta (düzeltilmemiş) büyük A ve O harflerinin üzerinde boşluk varken mavi başlıkta, büyük harf yüksekliğinin genel sınır kutusuna tam olarak sığması için ayarlama yapılmıştır.

descent-override

descent-override tanımlayıcısı, yazı tipinin taban çizgisinin 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ır kutusundaki fazlalıkları kırpmanın ek bir yolunu sunar. Metin kutusunu hassas bir şekilde sunmak için özelleştirebilirsiniz.

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 Yazı Tipleri 5. Seviye Spesifikasyonu
• 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 bir yolu: CSS yazı tipi tanımlayıcıları

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