Fon-optik-ukuran - Trik CSS

Anonim

The font-optical-sizingharta CSS membolehkan pelayar untuk menyesuaikan garis glyphs font untuk membuat mereka lebih mudah dibaca pada saiz yang berbeza. Sebagai contoh, teks yang lebih kecil mungkin mendapat garis besar yang lebih tebal untuk meningkatkan kontrasnya. Di sisi lain, teks yang lebih besar mungkin mendapat sesuatu yang lebih "halus" untuk memetik spesifikasi.

.element ( font-optical-sizing: none; )

Glyphs mempunyai garis besar?

Mereka buat! Sebenarnya, semua glyph memilikinya dan mereka berskala dengan ukuran fon. Masalahnya ialah garis besar yang sangat tipis pada saiz fon kecil mungkin tidak memberikan kontras yang cukup untuk keterbacaan terbaik; sama, garis besar yang lebih tebal pada saiz yang lebih besar mungkin mempunyai berat dan kontras yang terlalu banyak. font-optical-sizingcuba membetulkannya dengan membiarkan penyemak imbas bermain-main dengan garis besar sehingga membaca lebih baik pada skala yang berbeza. Hasilnya akan menjadi teks yang lebih ringkas dan panjang teks yang lebih sempit atau lebih lebar bergantung pada ukuran fon.

Ini hanya berfungsi pada fon yang menyokong ukuran optik

Dan fon yang menyokong ukuran optik adalah fon berubah - ubah , termasuk Roboto Delta, versi berubah-ubah dari Roboto klasik Google. Fon sokongan lain ialah Amstelvar. Kedua-dua fon dikendalikan oleh Type Network.

Walaupun fon berubah-ubah, ia mesti secara jelas menyokong ukuran optik sebagai ciri.

Kaedah lain untuk saiz fon secara optik

Properti font-optical-sizingini adalah kaedah yang paling berkesan untuk menyusun font yang menyokongnya secara optik. Cara lain adalah menggunakan font-variation-settingsharta tanah, yang membolehkan anda mengawal ukuran optik dengan opsz, yang merupakan kata kunci untuk ukuran optik pada fon berubah yang menyokongnya.

Perhatikan bahawa penggunaan font-variation-settingsmemerlukan anda untuk mengatur opszsesuai dengan ukuran font sehingga semuanya sesuai dengan tepat.

.element ( font-size: 18px; font-variation-settings: 'opsz', 18; )

Sintaks

font-optical-sizing: auto | none;
  • Permulaan: auto
  • Berlaku untuk: semua elemen
  • Diwarisi: ya
  • Nilai dikira: kata kunci yang ditentukan
  • Jenis animasi: diskret

Nilai

  • auto: Ini adalah nilai lalai. Ini membolehkan penyemak imbas mengoptimumkan teks pada saiz fon yang berbeza untuk dibaca.
  • none: Ini menghalang penyemak imbas mengubah teks.

Properti ini juga menerima nilai kata kunci global, termasuk inherit, initialdan unset.

Demo

Sokongan penyemak imbas

IE Hujung Firefox Chrome Safari Opera
Tidak 17+ 62+ 79+ 11+ 66+
Android Chrome Android Firefox Penyemak Imbas Android Safari iOS Opera Mini
85+ 79+ 81+ 11+ Semua
Sumber: caniuse

Bacaan lanjut

  • Modul Font CSS Tahap 4 (Draf Editor)
  • Dokumentasi MDN
  • Fon boleh ubah: Saiz optik, paksi tersuai, dan rasa ingin tahu yang lain (Tipografi Web Responsif)