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

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

Adam Argyle

font-size öğesinin 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 inceleyin. Soldaki örnekler ayarlanmamış ve tutarsız bir son boyuta sahiptir. Sağdaki örneklerde, size-adjust değerinin tutarlı bir nihai boyut olmasını sağlamak için 64px kullanılır.

Bu yayında, size-adjust adlı yeni bir CSS font-face tanımlayıcısı ele alınıyor. Ayrıca, daha sorunsuz bir kullanıcı deneyimi, tutarlı tasarım sistemleri ve daha öngörülebilir bir sayfa düzeni için yazı tipi boyutlarını düzeltmenin ve normalleştirmenin birkaç yolu da gösterilmektedir. Önemli bir kullanım alanı, kümülatif düzen kaymasını (CLS) önlemek için web yazı tipi oluşturmayı optimize etmektir.

Sorun alanının etkileşimli demosunu burada bulabilirsiniz. Açılır listeden yazı tipini değiştirmeyi deneyin ve şunları gözlemleyin:

1. Sonuçlardaki yükseklik farklılıkları.
2. Görsel olarak rahatsız edici içerik değişiklikleri.
3. Etkileşimli hedef alanların hareket etmesi (açılır liste sürekli yer değiştiriyor).

Yazı tiplerini size-adjust ile ö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 glifi varsayılan boyutunun% 150'sine ölçeklendirmek için size-adjust kullanılı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ştirme ile CLS'yi azaltma

Aşağıdaki GIF'te, soldaki örnekleri ve yazı tipi değiştirildiğinde nasıl bir kayma olduğunu inceleyin. 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 yazı tipi değiştirme tekniğini kullanabilirsiniz. Önce içeriği göstermek için hızlı yüklenen bir sistem yazı tipi oluşturun, ardından web yazı tipi yüklenmeyi tamamladığında bu yazı tipini web yazı tipiyle değiştirin. Bu sayede, iki dünyanın en iyi özelliklerinden yararlanabilirsiniz: İçerik en kısa sürede görünür hale gelir ve kullanıcılarınızın içerik için harcadığı zamandan ödün vermeden güzel bir şekilde biçimlendirilmiş bir sayfa elde edersiniz. Ancak sorun, web yazı tipi yüklendiğinde biraz farklı bir kutu yüksekliği boyutunda sunulduğu için bazen tüm sayfayı kaydırmasıdır.

size-adjust simgesini @font-face kuralına yerleştirerek yazı tipi için genel bir glif ayarlaması yapılır. Bu işlemi doğru zamanda yapmak, minimum görsel değişikliğe ve sorunsuz bir geçişe yol açar. Sorunsuz bir geçiş oluşturmak için boyutu manuel olarak ayarlayın veya Malte Ubl tarafından geliştirilen bu boyut ayarlama hesaplayıcısını deneyin.

Bu yayının başında, yazı tipi boyutu sorunu deneme yanılma yöntemiyle düzeltildi. size-adjust, kaynak kodunda Cookie ve Arial'deki aynı başlık, Press Start 2P'in doğal olarak yaptığı gibi aynı 64px'yi oluşturana kadar değiştirildi. İ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 belirlersiniz. Times, Arial veya bir sistem yazı tipiyle normalleştirme yapabilir, 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ılabilen bir yazı tipini uzak bir src özel yazı tipiyle eşleşecek şekilde ayarlayan aşağıdaki snippet'i inceleyin. Uzak özel yazı tipi, kalibrasyonun hedefidir (ö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 yazı tipi Arial, sorunsuz bir geçiş için yüklenen özel yazı tipine göre ayarlanıyor.

Bu strateji, tasarımcılara ve geliştiricilere boyutlandırma ve tipografi için aynı yazı tipini sunma avantajına sahiptir. Marka, kalibrasyon hedefidir. Bu, tasarım sistemleri için harika bir haber.

Malte'nin hesap makinesi de hedef olarak marka yazı tipini kullanır. Bir Google yazı tipi seçtiğinizde Arial'ın bu yazı tipiyle sorunsuz bir şekilde değiştirilmesi için nasıl ayarlanması gerektiği hesaplanır. Aşağıda, Arial'ın yüklendiği ve "Roboto-fallback" olarak adlandırıldığı hesap makinesindeki Roboto CSS'sine bir örnek verilmiştir:

@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 beklentisiyle 2 ayarlanmış yerel yedek yazı tipini sağlayan aşağıdaki örneğe bakın.

@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 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 hassas ayarlama

Gliflerin genel ölçeklendirilmesi tasarımınız veya yükleme stratejileriniz için yeterli ayarlama değilse size-adjust ile birlikte çalışan bazı daha hassas ayarlama seçeneklerini aşağıda bulabilirsiniz. ascent-override, descent-override, ve line-gap-override özellikleri şu anda Chromium 87+ ve Firefox 89+ sürümlerinde uygulanmaktadır.

ascent-override

ascent-override tanımlayıcısı, bir yazı tipinin taban çizgisinin üzerindeki yüksekliğini tanımlar.

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

Kırmızı başlıktaki (ayarlanmamış) büyük harfler A ve O'nun üzerinde boşluk var. Mavi başlık ise büyük harf yüksekliği genel sınırlayıcı kutuya tam oturacak şekilde ayarlanmış.

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%;
}

Kırmızı başlıktaki (ayarlanmamış) D ve O taban çizgilerinin altında boşluk bulunurken mavi başlık, harfleri taban çizgisine tam oturacak şekilde ayarlanmıştır.

line-gap-override

line-gap-override tanımlayıcısı, yazı tipinin satır aralığı metriğini tanımlar. Bu, önerilen satırlar arası boşluk veya harici satır başı yazı tipidir.

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

Kırmızı başlıktaki (ayarlanmamış) line-gap-override değeri yoktur. Bu nedenle, 0% değerindedir. Mavi başlıktaki line-gap-override değeri ise %50 artırıldığından harflerin üstünde ve altında buna göre boşluk oluşturulmuştur.

Özet

Bu geçersiz kılmaların her biri, web'in güvenli metin sınırlama kutusundaki fazlalıkları kırpmanın ek bir yolunu sunar. Metin kutusunu hassas sunum için uyarlayabilirsiniz.

Sonuç

@font-face size-adjust CSS özelliği, yazı tipi değiştirme deneyimini iyileştirmek için web düzenlerinizin metin sınırlama kutusunu özelleştirmenin heyecan verici bir yoludur. Böylece kullanıcılarınız için düzen kayması önlenir. Daha fazla bilgi edinmek için şu kaynaklara göz atın:

• CSS Fonts Level 5 Spec
• MDN'de Boyut Ayarlama
• @font-face oluşturucusunu sorunsuz değiştirme
• web.dev'de Cumulative Layout Shift (CLS)
• Yazı tipi yükleme etkisini azaltmanın yeni bir yolu: CSS yazı tipi tanımlayıcıları

Kristian Strand tarafından Unsplash'te yayınlanan fotoğraf