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

Artık bir web yazı tipi yüklenirken ö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.

Adam Argyle

font-size değerinin tutarlı bir şekilde 64px olduğu ve bu başlıklar arasındaki tek farkın font-family olduğu aşağıdaki demoyu inceleyin. Soldaki örnekler ayarlanmamıştır ve nihai boyutları tutarsızdır. Sağdaki örneklerde, 64px boyutunun tutarlı bir nihai boyut olmasını sağlamak için size-adjust kullanılmıştır.

Bu örnekte, yükseklikleri göstermek için Chrome Geliştirici Araçları CSS ızgara düzeni hata ayıklama araçları kullanılmıştır.

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

Browser Support

• 92
• 92
• 92
• 17

Source

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

1. Sonuçlardaki yükseklik farkları.
2. Görsel olarak rahatsız edici içerik kaymaları.
3. Etkileşimli hedef alanları hareket ediyor (açılır liste yer değiştiriyor).

Önemli terim: Yazı tipi ailesi ve yazı karakteri: Yazı karakteri, aile adı ve yazı tipi yüzüyle anılır. Helvetica Bold, belirli bir kalın yazı karakterini ifade ederken Helvetica, genel olarak 8'den fazla yazı karakterinden oluşan ailenin tamamını (normal, kalın, italik vb.) ifade eder. CSS @font-face ile yazı tipleriyle çalışırsınız ancak bunları kullanmak için font-family yazmanız gerekir.

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

Uyarı: Yukarıdaki demoda ikinci başlık birinciden daha büyük değilse tarayıcınız size-adjust özelliğini desteklemiyor demektir.

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.

Soldaki örnekte düzen kayması var, sağdakinde yok.

Yazı tipi oluşturmayı iyileştirmek için yazı tipi değiştirme harika bir tekniktir. Önce içeriği göstermek için hızlı yüklenen bir sistem yazı tipini oluşturun, ardından web yazı tipinin yüklenmesi tamamlandığında bunu bir web yazı tipiyle değiştirin. Bu sayede her iki dünyanın da en iyi özelliklerinden yararlanabilirsiniz: İçerik mümkün olan en kısa sürede görünür ve kullanıcınızın içeriğe ulaşma süresinden ödün vermeden güzel bir şekilde tasarlanmış bir sayfa elde edersiniz. Ancak bazen web yazı tipi yüklendiğinde, biraz farklı bir kutu yüksekliği boyutunda sunulduğu için tüm sayfayı kaydırır.

Daha fazla içerik, yazı tipi değiştiğinde daha fazla düzen kayması olasılığı anlamına gelir.

@font-face kuralına size-adjust ekleyerek yazı tipi için genel bir glif ayarlaması belirler. Zamanlamayı doğru ayarlarsanız görsel değişiklikler minimum düzeyde olur ve sorunsuz bir geçiş sağlanır. Sorunsuz bir geçiş için manuel olarak ayarlayın veya Malte Ubl'ın bu boyut ayarlama hesaplayıcısını deneyin.

Bir Google Web Font seçin, önceden ayarlanmış bir @font-face snippet'i alın.

Bu yazının başında, yazı tipi boyutu sorunu deneme yanılma yoluyla düzeltilmişti. size-adjust, kaynak kodunda Cookie ve Arial ile aynı başlık, Press Start 2P'nin doğal olarak oluşturduğu 64px ile aynı olacak şekilde 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ı tipleri kalibre ediliyor

Yazar olarak yazı tipi ölçeğini normalleştirmek için kalibrasyon hedeflerini siz belirlersiniz. Times, Arial veya bir sistem yazı tipini normalleştirdikten sonra özel yazı tiplerini buna uyacak şekilde ayarlayabilirsiniz. İndirdiğiniz yazı tipleriyle eşleşecek şekilde yerel yazı tiplerini de 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 ayarlar.

1. örnek: Uzak hedef

Yerel olarak kullanılabilen bir yazı tipini, uzak src özel yazı tipine uyacak şekilde ayarlayan aşağıdaki snippet'i inceleyin. Kalibrasyon için uzak bir özel yazı tipi (ör. marka yazı tipi) hedeflenir:

@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üklü bir özel yazı tipini bekleyecek şekilde ayarlanıyor.

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

Malte'nin hesaplayıcısı da hedef olarak bir marka yazı tipini kullanır. Bir Google Fonts seçtiğinizde, Arial'ın bu yazı tipiyle sorunsuz bir şekilde değiştirilmesi için nasıl ayarlanması gerektiği hesaplanır. Hesaplayıcıdan alınan ve Arial'ın yüklenip "Roboto-fallback" olarak adlandırıldığı Roboto CSS örneğini aşağıda görebilirsiniz:

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

Uyarı: font-family sırası çok önemlidir. Sıra ve öncelik burada belirlenir. En çok istediğiniz yazı tipinin ilk sırada olduğundan emin olun. Ayrıca local(Arial), kullanıcılarınızın tüm cihazlarında kullanılamayabilir. Bu nedenle, yazı tipi ailesinde birden fazla yedek sağlamak önemlidir.

Tamamen platformlar arası bir ayarlama oluşturmak için aşağıdaki örneğe bakın. Bu örnekte, marka yazı tipi beklentisiyle 2 adet ayarlanmış yerel yedek yazı tipi sağlanmaktadır.

@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

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 işlemini gerçekleştirmesi ve ardından gelen yazı tiplerini eşleşecek şekilde ayarlamasıdır.

ascent-override, descent-override ve line-gap-override ile daha hassas ayar yapma

Gliflerin genel ölçeklendirmesi, 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çenekleri aşağıda verilmiştir. ascent-override, descent-override ve line-gap-override özellikleri şu anda Chromium 87+ ve Firefox 89+ sürümlerinde uygulanmaktadır.

ascent-override

Browser Support

• 87
• 87
• 89
• 

Source

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ığın (ayarlanmamış) büyük A ve O harflerinin üzerinde boşluk varken mavi başlık, büyük harf yüksekliği genel sınırlayıcı kutuya tam oturacak şekilde ayarlanmıştır.

descent-override

Browser Support

• 87
• 87
• 89
• 

Source

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ığın (ayarlanmamış) D ve O harflerinin taban çizgilerinin altında boşluk varken mavi başlık, harfleri taban çizgisine tam oturacak şekilde ayarlanmıştır.

line-gap-override

Browser Support

• 87
• 87
• 89
• 

Source

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

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

Kırmızı başlıkta (ayarlanmamış) line-gap-override yoktur, yani 0% değerindedir. Mavi başlık ise %50 oranında yukarı ayarlanmıştır ve harflerin üstünde ve altında buna göre boşluk oluşturulmuştur.

Özet

Bu geçersiz kılma işlemlerinin her biri, web'in güvenli metin sınırlayıcı kutusundaki fazlalıkları kırpmanın ek bir yolunu sunar. Metin kutusunu, sunumunuzun tam olarak istediğiniz gibi görünmesi için özelleştirebilirsiniz.

Uyarı: Yukarıdaki demolardan herhangi birinde farklar gösterilmiyorsa tarayıcınız geçersiz kılmaları desteklemiyor demektir.

Sonuç

@font-face size-adjust CSS özelliği, web düzenlerinizin metin sınırlayıcı kutusunu özelleştirerek yazı tipi değiştirme deneyimini iyileştirmenin ve böylece kullanıcılarınız için düzen kaymasını önlemenin heyecan verici bir yoludur. Daha fazla bilgi için şu kaynakları inceleyin:

• CSS Fonts Level 5 Spec
• MDN'de boyut ayarlama açık
• Sorunsuz değiştirme @font-face oluşturucu
• web.dev'de Cumulative Layout Shift (CLS)
• Yazı Tipi Yükleme Etkisini Azaltmanın Yeni Bir Yolu: CSS Yazı Tipi Tanımlayıcıları