Görsel Olarak Kararlı Karışık Yazı Tipleri

Farklı yazı tipi ailelerini karıştırırken (ör. satır içi kod snippet'leri eklerken veya farklı temalar için yazı tipi ailelerini değiştirirken) "x yüksekliği"ndeki (küçük harflerin yüksekliği) farklılıklar, bir yazı tipinin diğerinden çok daha küçük veya daha büyük görünmesine neden olabilir. Bu durum, okunabilirliğin düşmesine ve düzende kaymalara neden olabilir.

font-size-adjust özelliği, yazı tipi boyutunu belirli bir yazı tipi metriğine (genellikle x yüksekliği) göre ayarlayarak metnin görsel boyutunu normalleştirmenize olanak tanır.

Uygulama Adımları

1. ZORUNLU: Web yazı tiplerini kullanan kapsayıcılar veya karışık yazı tipi aileleri içeren bloklar gibi yazı tipi tutarlılığının kritik olduğu öğelere font-size-adjust uygulayın.
2. ZORUNLU: İç içe yerleştirilmiş öğelerdeki yazı tipi boyutunu birincil yazı tipinin oranlarıyla otomatik olarak eşleştirmek için öğelerde from-font anahtar kelimesini kullanın.
3. ZORUNLU: Temel alınacak yazı tipi oranları farklı temalardan geldiğinde oranları bağımsız olarak normalleştirmek için font-size-adjust için belirli bir sayısal en boy oranı geçersiz kılma değeri (ör. font-size-adjust: 0.5) kullanın.

Örnek: x yüksekliğini otomatik olarak normalleştirme

from-font kullanmak en güçlü yaklaşımdır. İlk kullanılabilir yazı tipinden x yüksekliğinin en boy oranını çıkarır ve bunu alt öğelerdeki yazı tiplerine uygular.

.content-area {
  font-family: "MyCustomWebFont";
  /* Automatically extract and apply x-height ratio from MyCustomWebFont */
  font-size-adjust: from-font;
}
.content-area span{
  font-family: "MyOtherCustomWebFont"
}

Örnek: Belirli bir x yüksekliği belirtme

Ayarlanacak yazı tipi, boyutun temel alınacağı yazı tipinin alt öğesi olmadığında x yüksekliğini ayarlamak için bir değer belirtin.

.theme{
  font-family: Verdana, sans-serif;
}
.theme.alternate{
  font-family: Times;
  /* Set to the aspect ratio (x-height / font-size) of the primary font */
  font-size-adjust: 0.51;
}

Yedek stratejiler

ZORUNLU: font-size-adjust özelliğini desteklemeyen tarayıcılarda yazı tipleri doğal font-size değerlerinde oluşturulur. Bunu azaltmak için @supports bloğu kullanarak desteklenmeyen tarayıcılar için geçerli bir yedek strateji sağlamanız gerekir:

• font-size-adjust desteğini algılamak ve yedek stiller (ör. ayarlanmış satır yüksekliği veya yazı tipi boyutu) sağlamak için @supports not (font-size-adjust: from-font) kullanın.
• Birincil yazı tipinizle benzer x yüksekliklerine sahip yazı tipleri seçin.
• Alternatif ve iç içe yerleştirilmiş yazı tipi aileleri için belirli font-size ve line-height geçersiz kılmaları uygulayın.

/* Feature detection for font-size-adjust */
@supports not (font-size-adjust: from-font) {
  .content-area {
    /* Manual adjustment for browsers without support (if needed) */
    line-height: 1.6;
    font-size: 1.2rem;
  }
}