“@font-face” için CSS “size-adjust”

Aşağıdakileri göz önünde bulundur gösteri nerede font-size tutarlı 64pxve bu başlıkların her biri arasındaki tek fark, font-family. Soldaki örnekler ayarlanmamıştır ve tutarsız bir nihai boyuta sahiptir. Doğru kullanım örnekleri size-adjust emin olmak için 64px tutarlı nihai boyuttur.

Bu gönderi bir yeni CSS yazı tipi yüzü tanımlayıcısı isminde size-adjust. Ayrıca, daha sorunsuz 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 bir kullanım durumu, kümülatif düzen kaymasını (CLS) önlemek için web yazı tipi oluşturmayı optimize etmektir.

İşte interaktif gösteri sorun alanı. Yazı tipini açılır listeyle değiştirmeyi deneyin ve şunu gözlemleyin:

1. Sonuçlardaki yükseklik farkları.
2. Görsel olarak sarsıcı içerik kaymaları.
3. Etkileşimli hedef alanları hareket ettirmek (açılır menü etrafta zıplar!).

ile yazı tipleri nasıl ölçeklendirilir size-adjust #

Söz dizimine giriş:

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

1. adlı özel bir yazı tipi oluşturur. Adjusted Typeface.
2. kullanımlar size-adjust her bir glifi varsayılan boyutlarının %150’sine ölçeklendirmek için.
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";
}

Kesintisiz 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 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 harika bir teknik yazı tipi değiştirme. Önce içeriği göstermek için hızlı yüklenen bir sistem yazı tipi oluşturun, ardından web yazı tipinin yüklenmesi bittiğinde bunu bir web yazı tipiyle değiştirin. Bu size her iki dünyanın da en iyisini sunar: içerik mümkün olan en kısa sürede görünür hale gelir ve kullanıcınızın içerik için harcadığı zamandan ödün vermeden güzel bir şekilde tasarlanmış bir sayfa elde edersiniz. Ancak sorun, bazen web yazı tipi yüklendiğinde, biraz farklı bir kutu yüksekliği boyutunda sunulduğundan tüm sayfayı kaydırmasıdır.

Koyarak size-adjust içinde looking_for_font-face kuralı, yazı tipi yüzü için genel bir glif ayarı ayarlar. Bu doğru zamanlama, minimum görsel değişikliğe, kusursuz bir takasa yol açacaktır. Sorunsuz bir takas oluşturmak için elle ayarlayın veya bunu deneyin boyut ayarlama hesap makinesi ile Malta Ubl.

Bu yazının başında, yazı tipi boyutu sorununun düzeltilmesi deneme yanılma yoluyla yapıldı. size-adjust aynı başlığa kadar kaynak kodunda dürtüklendi Cookie Ve Arial aynı hale getirilmiş 64px gibi Press Start 2P doğal olarak yaptı. İki yazı tipini hedef yazı tipi boyutuna hizaladım.

looking_for_font-face {
font-family: 'Adjusted Arial';
size-adjust: 86%;
src: local(Arial);
}
looking_for_font-face {
font-family: 'Cookie';
size-adjust: 90.25%;
src: url(...woff2) format('woff2');
}

Yazı tiplerini kalibre etme #

Yazı tipi ölçeğini normalleştirmek için kalibrasyon hedef(ler)ini yazar olarak siz belirlersiniz. Times, Arial veya bir sistem yazı tipini normalleştirebilir, ardından özel yazı tiplerini eşleşecek şekilde ayarlayabilirsiniz. Ya da yerel yazı tiplerini indirdiklerinizle eşleşecek şekilde ayarlayabilirsiniz.

için stratejiler size-adjust kalibrasyon:

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.

Örnek 1: Uzak hedef #

Yerel olarak kullanılabilen bir yazı tipini uzak bir src özel yazı tipiyle eşleşecek şekilde ayarlayan aşağıdaki pasajı göz önünde bulundurun. Kalibrasyonun hedefi uzak bir özel yazı tipidir, belki bir marka yazı tipi:

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

looking_for_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 takas için yüklü bir özel yazı tipi beklentisiyle 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.

Hedef olarak bir marka yazı tipine sahip olmak, Malte’nin hesap makinesinin de çalışma şeklidir. Bir Google Yazı Tipi seçin ve Arial ile sorunsuz bir şekilde değiş tokuş yapmak için nasıl ayarlanacağını hesaplayacaktır. İşte bir Roboto CSS örneği hesap makinesiburada Arial yüklendi ve “Roboto-yedek” olarak adlandırıldı:

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

Tamamen platformlar arası bir ayarlama oluşturmak için, bir marka yazı tipi beklentisiyle 2 ayarlanmış yerel geri dönüş yazı tipi sağlayan aşağıdaki örneğe bakın.

looking_for_font-face {
font-family: "Roboto-fallback-1";
size-adjust: 100.06%;
src: local("Arial");
}
looking_for_font-face {
font-family: "Roboto-fallback-2";
size-adjust: 99.94%;
src: local("Arimo");
}
looking_for_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";
}

Örnek 2: Yerel hedef #

Bir markaya özel yazı tipini Arial ile eşleşecek şekilde ayarlayan aşağıdaki pasajı göz önünde bulundurun:

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

ile daha ince ayar ascent-override, descent-override Ve line-gap-override #

Gliflerin genel ölçeklendirmesi, tasarımınız veya yükleme stratejileriniz için yeterli ayarlama değilse, aşağıdakilerle birlikte çalışan bazı daha ince ayar seçenekleri aşağıda verilmiştir: size-adjust. bu looking_for_font-face/ascent-override" rel="noopener">ascent-override, looking_for_font-face/descent-override" rel="noopener">descent-overrideVe looking_for_font-face/line-gap-override" rel="noopener">line-gap-override özellikler şu anda Chromium 87+ ve Firefox 89+’da uygulanmaktadır.

ascent-override #

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

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

Kırmızı başlık (düzeltilmemiş) büyük A ve O harflerinin üzerinde boşluk içerirken, mavi başlık ayarlanmıştır, böylece kapak yüksekliği genel sınırlayıcı kutuya sıkıca oturur.

descent-override #

bu descent-override tanımlayıcı, yazı tipinin taban çizgisinin altındaki yüksekliği tanımlar.

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

Kırmızı başlığın (düzeltilmemiş) D ve O’nun altında boşluk vardır taban çizgilerimavi başlık ise harfleri taban çizgisine tam oturacak şekilde ayarlanmıştır.

line-gap-override #

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

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

Kırmızı başlığın (düzeltilmemiş) line-gap-overrideaslında 0%mavi başlık ise %50 yukarı çekilerek harflerin üstünde ve altında buna göre boşluk bırakılmıştır.

Hepsini bir araya koy #

Bu geçersiz kılmaların her biri, web’in güvenli metin sınırlama kutusundaki fazlalıkları kesmek için ek bir yol sunar. Metin kutusunu kesin sunum için uyarlayabilirsiniz.

Çözüm #

bu looking_for_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 kaymasını önlemek için web düzenlerinizin metin sınırlayıcı kutusunu özelleştirmenin heyecan verici bir yoludur. Daha fazla bilgi edinmek için şu kaynaklara göz atın:

fotoğrafı çeken Kristian Sahili Açık Unsplash