Font Campuran yang Stabil Secara Visual

Fitur web: font-size-adjust

Saat menggabungkan jenis font yang berbeda, misalnya saat menyisipkan cuplikan kode inline, atau mengganti jenis font untuk tema yang berbeda, perbedaan "x-height" (tinggi huruf kecil) dapat membuat satu font terlihat jauh lebih kecil atau lebih besar daripada font lainnya. Hal ini dapat menyebabkan keterbacaan yang buruk dan pergeseran tata letak.

Properti font-size-adjust memungkinkan Anda menormalisasi ukuran visual teks dengan menyesuaikan ukuran font berdasarkan metrik font tertentu (biasanya x-height).

Langkah-Langkah Penerapan

  1. WAJIB: Terapkan font-size-adjust ke elemen yang memerlukan konsistensi font, seperti penampung yang menggunakan font web atau blok dengan jenis font campuran.
  2. WAJIB: Gunakan kata kunci from-font pada elemen untuk otomatis mencocokkan ukuran font dalam elemen bertingkat dengan proporsi font utama.
  3. WAJIB: Gunakan nilai penggantian rasio aspek numerik tertentu untuk font-size-adjust (misalnya, font-size-adjust: 0.5) guna menormalisasi proporsi secara independen saat proporsi font yang menjadi dasar berasal dari tema yang berbeda.

Contoh: Menormalisasi tinggi x secara otomatis

Menggunakan from-font adalah pendekatan yang paling efektif. Properti ini mengekstrak rasio aspek x-height dari font pertama yang tersedia dan menerapkannya ke font dalam elemen turunan.

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

Contoh: Menentukan tinggi x tertentu

Jika font yang akan disesuaikan bukan turunan dari font yang menjadi dasar ukuran, tentukan nilai untuk menyesuaikan x-height.

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

Strategi penggantian

WAJIB: Di browser yang tidak mendukung font-size-adjust, font akan dirender pada nilai font-size alaminya. Anda harus memberikan strategi penggantian yang valid untuk browser yang tidak mendukung menggunakan blok @supports untuk mengurangi hal ini:

  • Gunakan @supports not (font-size-adjust: from-font) untuk mendeteksi dukungan font-size-adjust dan memberikan gaya penggantian (misalnya, tinggi baris atau ukuran font yang disesuaikan).
  • Pilih font dengan x-height yang mirip dengan font utama Anda.
  • Terapkan penggantian font-size dan line-height tertentu untuk jenis font alternatif dan bertingkat.
/* 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;
  }
}