Untuk menyamakan ukuran tampak font cadangan dengan webfont, normalkan tinggi x keduanya menggunakan CSS font-size-adjust, atau skalakan face cadangan tertentu dengan size-adjust. Panduan ini membahas cara memilih, menghitung, dan menguji penyesuaian tersebut di browser desktop Mac.

Pilih metrik yang sesuai dengan teks Anda

Untuk teks isi berbahasa Inggris sehari-hari, mulailah dengan tinggi x: tinggi huruf kecil relatif terhadap ukuran font. Dua font yang diatur ke 16px dapat memiliki tinggi x yang berbeda, sehingga ukuran CSS yang sama belum tentu tampak sama. MDN mendokumentasikan font-size-adjust secara khusus untuk menormalkan metrik font pilihan di berbagai font yang digunakan untuk merender teks. MDN: font-size-adjust

Pilih metrik sebelum mengubah nilainya. Paragraf yang didominasi huruf kecil biasanya cocok menggunakan ex-height; label huruf kapital mungkin memerlukan cap-height. Opsi ch-width menormalkan lebar advance karakter nol, yang menjawab pertanyaan berbeda dari menyamakan tinggi huruf kecil. Tak satu pun opsi ini menjamin lebar yang sama untuk setiap kata. MDN: nilai font-size-adjust

Untuk tugas ini, gunakan halaman sintetis yang memuat judul seperti Koleksi contoh, label seperti Ubin 024, dan paragraf seperti Ubin kuning kecokelatan berada di samping lingkaran biru. Setiap ubin memiliki label pendek. Tujuannya adalah membuat teks huruf kecil pada font cadangan tampak berukuran serupa sambil memastikan elemen-elemen ini tetap muat.

Tugas langsung Anda Mulai dengan Hal yang perlu diperiksa secara terpisah
Menormalkan ukuran huruf kecil di seluruh tumpukan font font-size-adjust dengan rasio tinggi x target Pembungkusan teks dan jarak baris
Menyetel satu face cadangan yang diketahui Alias font cadangan dengan size-adjust Ketersediaan face lokal yang tepat tersebut
Mengurangi perbedaan tata letak vertikal Penggantian metrik font setelah penyamaan ukuran Garis dasar dan tinggi paragraf

Dua mekanisme pertama memiliki cakupan berbeda: font-size-adjust diterapkan pada teks, sedangkan size-adjust berada di dalam aturan @font-face dan menskalakan kontur serta metrik face tersebut. MDN: font-size-adjust, MDN: size-adjust

Siapkan perbandingan yang andal di Mac Anda

Gunakan halaman pratinjau yang stylesheet-nya dapat Anda edit. Contoh di bawah menggunakan webfont yang sudah ada, Sample Web; ganti dengan nama family CSS sebenarnya. Ini adalah fragmen integrasi yang mengasumsikan webfont sudah dideklarasikan dan elemen contoh sudah tersedia.

Di Chrome pada Mac, klik kanan paragraf contoh lalu pilih Inspect. Sebagai alternatif, tekan Command + Option + C lalu pilih paragraf tersebut. Chrome akan membuka panel Elements, tempat Styles menampilkan CSS yang diterapkan. Chrome: Buka Chrome DevTools

Buka Computed, gulir ke Rendered Fonts, lalu pastikan font mana yang benar-benar menggambar contoh tersebut. Daftar family yang dideklarasikan saja tidak membuktikan bahwa font yang diutamakan sedang dirender. Dokumentasi Chrome menunjukkan penggunaan bagian ini untuk membedakan sumber font lokal dan jaringan. Chrome: Terapkan efek lain

Pertahankan viewport, zoom, bobot font, gaya font, spasi huruf, dan lebar kontainer selama perbandingan. Periksa dahulu kondisi webfont. Lalu, ubah sementara font-family paragraf ke font cadangan yang Anda inginkan, seperti Arial, sans-serif, dan periksa kembali font yang dirender.

Gunakan Styles untuk mengedit deklarasi dan kotak centangnya untuk mengaktifkan atau menonaktifkan penyesuaian. Dengan demikian, Anda dapat membandingkan paragraf yang sama tanpa mengubah kata-kata atau tata letaknya. Chrome: Referensi fitur CSS

Saat mengukur melalui JavaScript, tunggu pemuatan font terkait alih-alih menggunakan jeda sembarang. document.fonts.load() dapat meminta face tertentu; document.fonts.ready akan terpenuhi setelah pemuatan font dokumen dan operasi tata letak terkait selesai. Keduanya tidak menggantikan pemeriksaan font yang benar-benar dirender. MDN: FontFaceSet.load(), MDN: FontFaceSet.ready

Hitung dan terapkan rasio tinggi x target

Target untuk font-size-adjust numerik adalah rasio, bukan persentase pembesaran. Bagi tinggi x webfont dengan unit per em jika metrik tersebut tersedia untuk face yang tepat. Browser kemudian menyesuaikan setiap font terpilih ke proporsi target tersebut terhadap ukuran font yang dideklarasikan. W3C: CSS Fonts Module Level 5

Perhatikan masukan ilustratif berikut, yang bukan pengukuran font bernama apa pun:

Metrik Webfont target Font cadangan
Unit per em 1.000 1.000
Tinggi x dalam unit font 520 470
Rasio tinggi x 0,52 0,47

Pada ukuran yang dideklarasikan 16px, tinggi x target adalah 16 × 0.52 = 8.32px. Untuk mencapai tinggi tersebut, font cadangan memerlukan faktor skala 0.52 ÷ 0.47, kira-kira 1.106383. Ukuran render setelah penyesuaian sekitar 17.7021px. Perhitungan ini mengilustrasikan rumus spesifikasi; hasilnya tidak memprediksi pembungkusan teks sebenarnya.

Untuk pendekatan berbasis properti, terapkan rasio target pada teks. Fragmen CSS ini mengasumsikan paragraf contoh memiliki kelas sample-copy:

.sample-copy {
  font-family: "Sample Web", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-size-adjust: 0.52;
}

Di sini, 0.52 adalah milik webfont ilustratif. Ganti dengan rasio face target Anda. Nilai yang tidak akurat juga mengubah ukuran render font pilihan; properti ini berlaku pada setiap font terpilih, termasuk webfont. W3C: CSS Fonts Module Level 5

Jika Anda tidak memiliki rasio yang tepercaya, W3C mendokumentasikan metode kalibrasi visual: bandingkan dua contoh dari font, ukuran, dan konten yang sama; nonaktifkan penyesuaian pada satu contoh dan coba penyesuaian numerik pada contoh lainnya. Mulai dari 0.5 lalu sesuaikan hingga keduanya cocok. Gunakan contoh terisolasi yang diperbesar untuk kalibrasi, lalu kembali ke ukuran baca normal untuk menilai hasilnya. Anggap nilai yang diperoleh secara visual sebagai perkiraan. W3C: CSS Fonts Module Level 5

Kata kunci from-font mengambil target dari font pertama yang tersedia. Jika webfont yang dimaksud tidak tersedia, font lain dapat menjadi sumber targetnya. Untuk font cadangan yang harus cocok dengan webfont yang diketahui meskipun webfont itu tidak pernah dimuat, gunakan rasio numerik yang telah ditetapkan. MDN: nilai font-size-adjust

Gunakan alias font cadangan jika Anda perlu mengendalikan satu face

Pilih size-adjust jika Anda ingin skala diterapkan pada face cadangan tertentu. Untuk pasangan ilustratif di atas, ubah faktor skala menjadi persentase: 100 × 0.52 ÷ 0.47 = 110.6383%. Descriptor ini menskalakan advance glif serta kontur dan metrik terkait lainnya. MDN: size-adjust

Fragmen integrasi alternatif ini mengasumsikan Arial Regular tersedia secara lokal dan webfont target sudah dideklarasikan. Persentasenya bersifat ilustratif, jadi ukur pasangan font Anda sebelum menggunakannya:

@font-face {
  font-family: "Sample Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 400;
  font-style: normal;
  size-adjust: 110.6383%;
}

.sample-copy {
  font-family: "Sample Web", "Sample Fallback", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-size-adjust: none;
}

Alias sintetis ini membatasi penyesuaian pada tumpukan tersebut. Sumber local() mengidentifikasi face font tertentu; sumber itu tidak memilih sans-serif sistem secara sembarang. Spesifikasi CSS Fonts menyarankan penggunaan nama lengkap dan nama PostScript agar pencocokan dapat dilakukan di berbagai platform. Jika kedua sumber tidak tersedia, browser akan melanjutkan ke family berikutnya dalam daftar. W3C: CSS Fonts Module Level 4

Gunakan ini sebagai alternatif metode sebelumnya. Menerapkan font-size-adjust pada teks yang menggunakan face dengan size-adjust dapat menormalkan hingga menghilangkan skala yang dimaksud, karena properti tersebut menggunakan metrik yang sudah diganti. MDN: deskripsi font-size-adjust

Diagnosis perbedaan pembungkusan dan garis dasar secara terpisah

Setelah menyamakan tinggi huruf kecil, bandingkan judul, label, dan paragraf pada lebar yang dituju. Urutan pemeriksaan yang berguna adalah ukuran tampak terlebih dahulu, akhir baris berikutnya, lalu tinggi blok secara keseluruhan. Cara ini memisahkan tiga masalah visual yang mungkin membuat Anda terus mengubah satu persentase.

Jika ukuran huruf kecil terlihat tepat tetapi paragraf dibungkus berbeda, bandingkan dengan font cadangan lain sebelum menyempurnakan skala. Menyesuaikan satu metrik tinggi tidak membuat desain glif yang berbeda memiliki semua lebar advance yang sama. Catat kata terakhir pada setiap baris dalam kondisi webfont dan font cadangan agar perbedaan yang tersisa terlihat jelas.

Jika garis dasar atau tinggi blok masih berbeda, periksa ascent-override, descent-override, dan line-gap-override. Semua ini mengendalikan metrik tata letak, bukan menyediakan target ukuran visual lainnya. Misalnya, ascent adalah metrik di atas garis dasar yang digunakan untuk menata kotak baris. Turunkan nilai penggantian dari pasangan font sebenarnya, bukan menyalin persentase yang tidak terkait. MDN: ascent-override

Untuk titik awal yang dibuat secara otomatis, createFontStack milik Capsize yang terdokumentasi menerima metrik dalam urutan family pilihan dan menghasilkan fontFamily serta fontFaces untuk font cadangan. Gunakan kedua keluaran tersebut bersama-sama. Dokumentasinya juga menyediakan @capsizecss/metrics untuk font yang disertakan dan @capsizecss/unpack untuk mengekstrak metrik dari file khusus. Deklarasi yang dihasilkan tetap perlu diuji dengan tata letak contoh Anda. Dokumentasi Capsize

Pertahankan tata letak browser dan pembentukan teks

Pengukuran Canvas dapat membantu membandingkan string, tetapi cakupan pertanyaannya lebih sempit. WHATWG mendefinisikan measureText().width sebagai lebar advance, sedangkan pengukuran kotak pembatas sebenarnya mendeskripsikan teks yang digambar. Canvas menyiapkan baris hipotetis dengan lebar tak terbatas, sehingga lebarnya bukan pengukuran paragraf DOM yang dibungkus. WHATWG: HTML Standard, Canvas

Pertahankan kata dan kalimat utuh dalam pengujian Anda. Hindari menyusun ulang teks sebagai karakter yang diposisikan satu per satu atau menganggap penjumlahan lebar karakter dapat mereproduksi string yang dibentuk. CSS menetapkan kondisi yang mengatur pembentukan teks melintasi batas inline, termasuk batas dengan perubahan spasi atau perataan. Pertahankan struktur normal komponen saat memvalidasi font cadangannya. W3C: CSS Text Module Level 3

Periksa dukungan browser dan selesaikan perbandingan

MDN mencatat font-size-adjust dasar sebagai Baseline 2024 dan size-adjust tersedia secara luas sejak September 2023. Hal ini tidak memastikan dukungan untuk setiap metrik atau kata kunci yang lebih baru di browser lama. Periksa tabel kompatibilitas untuk sintaks yang benar-benar Anda gunakan. MDN: font-size-adjust, MDN: size-adjust

Jika bentuk metrik lanjutan tidak tersedia, gunakan normalisasi tinggi x numerik yang didukung bila sesuai dengan tugas, atau descriptor khusus font cadangan yang didukung. Jika penyesuaian yang diperlukan sama sekali tidak didukung, gunakan font cadangan yang secara visual mendekati dan periksa tata letak tanpa penyesuaian di browser tersebut.

Selesaikan dengan mengulangi perbandingan untuk setiap bobot dan gaya yang Anda gunakan, lalu di browser Mac yang ingin Anda dukung. Pastikan face yang dirender setiap kali. Pertahankan penyesuaian yang dipilih hanya jika judul, label, dan paragraf sintetis memiliki ukuran tampak, pembungkusan, dan jarak yang sesuai dalam kondisi webfont maupun font cadangan.

Sumber