Cara Menggunakan Property CSS font-size-adjust

Property font-size-Adjust digunakan untuk menentukan ukuran font berdasarkan tinggi-x (tinggi huruf kecil) font, bukan tinggi utama font.

Di web, Kalian tidak selalu dapat menjamin font-family apa yang akan digunakan. Menggunakan property font-family, Kalian bisa menentukan daftar font-family, dimulai dengan font-family pilihan, dan kemudian daftar fallback ketika keluarga pilihan tidak tersedia atau gagal memuat karena alasan apa pun.

Tetapi tidak semua keluarga font memiliki karakteristik yang sama dan terlihat sama pada ukuran yang berbeda. Sebagai contoh, keluarga font sans-serif biasanya lebih mudah dibaca pada ukuran kecil tertentu daripada font serif pada ukuran yang sama. Ini terutama karena perbedaan ukuran huruf kecil font.

Ukuran font ditentukan oleh tinggi font, dan tinggi x font adalah tinggi huruf kecil (biasanya huruf ‘x’ digunakan sebagai referensi, maka nama tinggi x).

Menggunakan tinggi dan tinggi x font, setiap font memiliki rasio aspek, yang merupakan rasio tinggi x terhadap tinggi font.

Lebih tepatnya, rasio aspek dihitung dengan membagi x-tinggi font dengan ukuran font (tingginya).

Properti font-size-Adjust digunakan untuk menentukan ukuran font berdasarkan pada ketinggian x font, bukan ketinggian font. Ini sangat berguna karena memungkinkan kita untuk menyesuaikan ukuran font wajah font tertentu agar lebih mudah dibaca, terutama jika Anda harus menggunakan wajah font sekunder yang rasio aspeknya tidak sama dengan keluarga font utama Anda. menggunakan.

Nilai penyesuaian ukuran font kemudian diatur sehingga sama dengan nilai rasio aspek font primer. Misalnya, jika font utama Anda memiliki rasio aspek 0,58, maka Anda akan menggunakan penyesuaian ukuran font: 0,58 untuk memastikan bahwa font sekunder apa pun — termasuk font pengganti apa pun — akan menghormati rasio aspek itu dan disesuaikan dengan itu. nilai jika / saat digunakan.

Berikut ini adalah contoh yang menggunakan dua kelompok font: ‘Verdana’ sebagai font pilihan, dan ‘Times New Roman’ sebagai font pengganti. Contohnya diambil dari alat ini. Alat ini menunjukkan rasio aspek dari keluarga pilihan pertama, yang dalam hal ini adalah ‘Verdana’. Kemudian, ini menunjukkan bagaimana kedua font akan terlihat jika tidak ada penyesuaian ukuran font yang diterapkan. Dan kemudian itu menunjukkan bagaimana font ‘Times New Roman’ disesuaikan dengan tinggi x yang sama dengan ‘Verdana’ dengan menggunakan properti penyesuaian ukuran font dengan nilai rasio aspek font ‘Verdana’.

Alat yang disebutkan di sini adalah cara yang bagus untuk memvisualisasikan cara kerja properti penyesuaian ukuran font. Alat lain oleh pengembang yang sama juga tersedia yang memungkinkan Anda untuk mendapatkan aspek rasio dari semua font yang diinstal pada sistem Anda sebagai tabel rasio aspek.

Agar properti penyesuaian ukuran font kompatibel dengan browser yang tidak mendukungnya, properti tersebut ditentukan sebagai angka yang dikalikan dengan properti ukuran font. Jadi, browser yang mendukungnya akan menyesuaikan ukuran font dari font pengganti, dan browser yang tidak mendukungnya hanya akan mengabaikannya dan hasil rendering font tidak akan terpengaruh. Seperti disebutkan sebelumnya, nilai properti penyesuaian ukuran font biasanya rasio aspek dari font pilihan pertama yang Anda ingin semua font pengganti disesuaikan. Contoh:

font-size: 20px;       
font-size-adjust: 0.6; 
/ * 0,6 * 20px = 12px huruf kecil untuk font yang disesuaikan;
di mana 0,6 adalah rasio aspek dari font pilihan pertama * /

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *