Font-size-sesuaikan - Trik CSS

Anonim

Properti ini memberi pengembang kemampuan untuk menyetel font-sizeelemen tergantung pada ukuran huruf kecilnya, bukan huruf besar.

.element ( font-size: 22px; font-size-adjust: .5; )

Dalam hal ini huruf kecil dari font akan menjadi 11px, karena 22 x .5 = 11.

Saat memuat font, kemungkinan ada rasio aspek yang berbeda antara huruf kecil dari font fallback dan jenis huruf yang baru dimuat, jadi font-size-adjustberguna untuk mengontrol jumlah reflow saat kita mendeklarasikan yang baru font-familydan melihat Flash of Unstyled Text (FOUT).

Dalam demo di bawah ini, dimungkinkan untuk mengaktifkan dan menonaktifkan properti ini untuk menunjukkan bagaimana font web seperti Chaparral berbeda dari x-height dan perataan karakter di Times, font fallback. Namun berhati-hatilah, saat ini properti ini hanya didukung oleh sejumlah kecil browser.

Hal ini dapat memiliki efek dramatis saat disetel pada sebagian besar teks isi, dan secara substansial meningkatkan pergantian tampilan yang terjadi saat beralih antara penggantian dan font yang baru dimuat:

Informasi lebih lanjut

  • MDN
  • W3C

Dukungan browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.

Desktop

Chrome Firefox YAITU Tepi Safari
Tidak 3 Tidak Tidak Tidak

Ponsel / Tablet

Android Chrome Android Firefox Android iOS Safari
Tidak Tidak Tidak Tidak