@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.

Adam Argyle

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 size-adjust kullanımı 64px değerinin tutarlı nihai boyut olduğundan emin olun.

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

Bu yayında, size-adjust adlı yeni bir CSS yazı tipi tanımlayıcısı incelenmektedir. Ayrıca, yazı tipi boyutlarını düzeltmeye ve normalleştirmeye yönelik birkaç yöntem de gösterilir kullanarak daha kolay tahmin edilebilir ve tutarlı tasarım sistemleriyle sayfa düzeni. Önemli kullanım alanlarından biri de web yazı tipi oluşturmayı optimize ederek kümülatif düzen kayması (CLS).

Tarayıcı desteği

• 92)
• 92)
• 92
• 17

Kaynak

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 ettirmek (açılır menü etrafta gezinir!).

Anahtar terim: Yazı tipi ailesi ve yazı tipi: Yazı tipi, aile adının yanı sıra yazı tipi yüzüyle belirtilir. Helvetica Bold, ilgili kalın yazı tipini belirtirken, Helvetica genel olarak 8+ yazı tipi ailesinin 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ı tipleri nasıl ölçeklendirilir?

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 aşağıdaki gibi kullanın:

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

Uyarı: Yukarıdaki demodaki ikinci başlık ilkinden büyük değilse tarayıcınız size-adjust'ı desteklemiyordur.

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

Aşağıdaki GIF'te, soldaki örnekleri ve değişimin nasıl olduğunu izleyin. yazı tipi değiştirildiğini varsayalım. Bu, tek bir başlık içeren küçük bir örnektir. öğesidir ve bu sorun belirgin şekilde belirgindir.

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

Yazı tipi oluşturmayı iyileştirmek için kullanabileceğiniz mükemmel bir teknik yazı tipi değiştirmedir. Hızlı yükleme oluşturun önce içeriği gösterecek bir sistem yazı tipini, ardından Web yazı tipinin yüklenmesi biter. Bu sayede iki platformdan da en iyi şekilde yararlanabilirsiniz: görünür hale gelir ve daha fazla ayrıntı içermeyen güzel bir stilde bir sayfanız ve kullanıcınızın içeriğe ayırdığı zamanı feda etmektir. Ancak sorun şu ki bazen Web yazı tipi yüklendiğinde, farklı bir kutu yüksekliğinde küçük bir fark var.

Yazı tipi değiştiğinde daha fazla içerik, daha fazla olası sayfa düzeni değişikliğine eşittir

@font-face kuralına size-adjust yerleştirildiğinde bir genel glif belirlenir yazı tipini ayarlayın. Bu sağ ayarı zamanlamak, görsel açıdan asgari düzeyde sorunsuz bir değişim. Sorunsuz bir değişiklik oluşturmak için elle ayarlayın veya bunu deneyin boyut-düzenleme hesap makinesi Malte Ubl tarafından yayınlandı.

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

Bu gönderinin başında, yazı tipi boyutu sorununu düzeltme işlemi deneme ve hatası. 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ı tipleri kalibre ediliyor

Yazar olarak, yazı tipi ölçeğini normalleştirmek için kalibrasyon hedeflerini siz belirlersiniz. Times, GPC veya bir sistem yazı tipine göre normalleştirdikten sonra özel uygun yazı tiplerini tıklayın. 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, belirli bir yazı tipi için yerel yazı tipini kullanan sorunsuz değiştirme.

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 harika bir haber niteliğinde.

Malte'nin hesap makinesi de hedef olarak bir marka yazı tipine sahiptir. Bir Google Yazı Tipi seçtiğinizde, GPC'nin yazı tipini sorunsuz bir şekilde nasıl görüntüleyebilirsiniz. hesap makinesi "Roboto-fallback"in yüklendiği ve adlandırıldığı bu senaryoda:

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

Uyarı: font-family öğesinin sırası önemlidir. Sıralama ve öncelik burada ön plana çıkar. En çok istediğiniz yazı karakterinin en başta 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ğlamanız önemlidir.

Tamamen platformlar arası bir düzenleme oluşturmak için bir marka yazı tipi beklentisine göre 2 düzenlenmiş yerel yedek yazı tipi 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 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 avantajına sahiptir. Böylece gelen yazı tiplerini eşleştirebilirsiniz.

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 özelliklerinin şu anda Chromium 87 ve sonraki sürümlerde ve Firefox 89 ve sonraki sürümlerde uygulandığını hatırlatmak isteriz.

ascent-override

Tarayıcı Desteği

• 87
• 87
• 89
• x

Kaynak

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

Tarayıcı Desteği

• 87
• 87
• 89
• x

Kaynak

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 (düzenlenmemiş) altında D ve O'nun altında boşluk var referans değerleri, mavi renk ise başlık, harflerin referans çizgisine tam olarak duracak şekilde düzenlenmiştir.

line-gap-override

Tarayıcı desteği

• 87
• 87
• 89
• x

Kaynak

line-gap-override açıklayıcısı, yazı tipi için çizgi 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 bulunmuyor. Aslında başlık 0% ise mavi başlık %50 oranında ayarlandı ve yukarıda alan oluşturuluyor ve harflerin altına uygun şekilde yazın.

Tüm unsurların birleşimi

Bu geçersiz kılma durumlarının her biri, web'deki aşırı sayıda içeriği kırpmak için ek bir yol sunar. güvenli metin sınırlayıcı kutusu. Metin kutusunu tam sunum için uyarlayabilirsiniz.

Uyarı: Yukarıdaki demolardan herhangi birinde fark yoksa tarayıcınız geçersiz kılma işlemlerini desteklemiyor demektir.

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 kaynaklar:

• 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