Font-optical-sizing - Trik CSS

Anonim

The font-optical-sizingproperti CSS memungkinkan browser untuk menyesuaikan garis besar mesin terbang font untuk membuat mereka lebih mudah dibaca pada ukuran yang berbeda. Misalnya, teks yang lebih kecil mungkin mendapatkan kerangka yang lebih tebal untuk meningkatkan kontrasnya. Di sisi lain, teks yang lebih besar mungkin mendapatkan sesuatu yang lebih "rumit" untuk mengutip spesifikasinya.

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

Mesin terbang memiliki garis besar?

Mereka melakukannya! Faktanya, semua mesin terbang memilikinya dan diskalakan dengan ukuran font. Masalahnya adalah garis luar yang sangat tipis dengan ukuran huruf yang kecil mungkin tidak memberikan kontras yang cukup untuk keterbacaan terbaik; demikian pula, garis tepi yang lebih tebal pada ukuran yang lebih besar mungkin memiliki terlalu banyak bobot dan kontras. font-optical-sizingmencoba untuk memperbaikinya dengan membiarkan browser mengutak-atik garis besar sehingga terbaca lebih baik pada skala yang berbeda. Hasilnya akan menjadi teks yang lebih tajam dan panjang teks yang lebih sempit atau lebih lebar tergantung pada ukuran font.

Ini hanya berfungsi pada font yang mendukung ukuran optik

Dan font yang mendukung ukuran optik adalah font variabel , termasuk Roboto Delta, versi variabel dari Roboto klasik Google. Font pendukung lainnya adalah Amstelvar. Kedua font dipertahankan oleh Type Network.

Meskipun font bervariasi, itu harus secara eksplisit mendukung ukuran optik sebagai fitur.

Cara lain untuk mengukur font secara optik

The font-optical-sizingproperti adalah cara yang paling efisien untuk optik ukuran font yang mendukung hal itu. Cara lain adalah menggunakan font-variation-settingsproperti, yang memungkinkan Anda untuk mengontrol ukuran optik dengan opsz, yang merupakan kata kunci untuk ukuran optik pada font variabel yang mendukungnya.

Perhatikan bahwa menggunakan font-variation-settingsmengharuskan Anda untuk mengatur opszsesuai dengan ukuran font sehingga semuanya berskala dengan benar.

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

Sintaksis

font-optical-sizing: auto | none;
  • Awal: auto
  • Berlaku untuk: semua elemen
  • Diwariskan: ya
  • Nilai yang dihitung: kata kunci tertentu
  • Jenis animasi: diskrit

Nilai

  • auto: Ini adalah nilai default. Ini memungkinkan browser untuk mengoptimalkan teks pada ukuran font yang berbeda untuk keterbacaan.
  • none: Ini mencegah browser mengubah teks.

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

Demo

Dukungan browser

YAITU Tepi Firefox Chrome Safari Opera
Tidak 17+ 62+ 79+ 11+ 66+
Android Chrome Android Firefox Browser Android iOS Safari Opera Mini
85+ 79+ 81+ 11+ Semua
Sumber: caniuse

Bacaan lebih lanjut

  • Modul Font CSS Level 4 (Draf Editor)
  • Dokumentasi MDN
  • Font variabel: Ukuran optik, sumbu kustom, dan keingintahuan lainnya (Tipografi Web Responsif)