Fon-sintesis - Trik CSS

Anonim

The font-systhesisharta di CSS memberikan arahan pelayar untuk bagaimana untuk mengendalikan watak font huruf tebal dan ditulis dengan huruf condong apabila yang dinyatakan font-familytidak termasuk mereka.

Mari kita ambil Lato dari Google Font sebagai contoh. Ia mengatakan terdapat 10 variasi fon yang berbeza.

Setiap variasi fon tersebut secara teknikal adalah fail fon yang berbeza. Sekiranya kita ingin menggunakan bobot dan gaya tertentu, maka kita akan memautkan fail tersebut sehingga penyemak imbas memuat sesuatu.

Kalimat ini biasanya memerlukan empat fail fon yang berbeza.

Tetapi, tidak semua fon termasuk fail untuk menangani berat dan gaya. Dalam kes tersebut, penyemak imbas akan "mensintesiskan" penampilan itu sendiri. Penyemak imbas melakukan yang terbaik, tetapi corak dan gaya cetak kadang-kadang menjadikan teks tidak mudah dibaca; iaitu, kurang mudah dibaca daripada versi yang benar-benar dirancang. Dalam kes yang paling ringan, kita mungkin melihat watak bertindih. Dalam kes yang lebih teruk, teksnya sama sekali tidak dapat dibaca atau bahkan boleh mengubah makna - seperti yang boleh berlaku dengan bahasa seperti skrip logografi Cina, Jepun, Korea dan lain-lain.

Di situlah font-synthesismasuk. Ia mengawal jenis huruf mana yang dibenarkan oleh penyemak imbas untuk disintesis.

Sintaks

.element ( font-synthesis: none | ( weight || style ); )

Dalam bahasa Inggeris biasa, ini bermaksud font-synthesisakan menerima:

  • nilai none
  • sama ada weightataustyle
  • kedua weight- duanya danstyle

Perlu diperhatikan bahawa font-synthesisia dianggap sebagai harta tanah yang pendek. Menurut spesifikasi, ini adalah gabungan font-synthesis-weightdan font-synthesis-styledi mana keduanya menerima nilai autoatau none. Oleh kerana mungkin mendapat kesan yang sama menggunakan jalan pintas, itu mungkin kaedah terbaik.

Nilai

  • none: Tidak berani atau serong boleh disintesis
  • weight: Tebal boleh disintesis oleh penyemak imbas
  • style: Miring boleh disintesis oleh penyemak imbas
font-synthesis: none; /* browser will not synthesize any font faces */ font-synthesis: style; /* browser will not synthesize a bold font face */ font-synthesis: weight; /* browser will not synthesize an oblique font face */ font-synthesis: weight style; /* browser will synthesize bold and oblique faces if they are unavailable */

Penggunaan

font-synthesisboleh digunakan dengan semua elemen, termasuk unsur-unsur ::first-letterdan ::first-linepseudo.

Mungkin ada kes di mana tidak membenarkan penyemak imbas menyintesis tebal dan serong pada keseluruhan bahasa masuk akal kerana salah satu daripadanya dapat mengaburkan watak. Berikut adalah contoh yang diambil dari spesifikasi yang melumpuhkan wajah huruf tebal dan serong yang disintesis yang mengandungi aksara Arab:

/* Disables synthetic bolded and obliqued characters in Arabic */ *:lang(ar) ( font-synthesis: none; )

Demo

Sokongan penyemak imbas

Pada masa penulisan, caniuse melaporkan liputan global sebanyak 20.21% untuk font-synthesisharta tanah.

Desktop

IE Hujung Firefox Chrome Safari Opera
Tidak Tidak 34+ Tidak 9+ Tidak

Mudah alih

Safari iOS Opera Mini Penyemak Imbas Android Chrome untuk Android Firefox untuk Android
9+ Semua Tidak Tidak 68

Mahu digunakan font-synthesisdalam e-mel? Campaign Monitor melaporkan bahawa ia disokong oleh klien berikut:

  • Apple Mail 10+
  • Prospek untuk Mac
  • Aplikasi AOL Alto iOS
  • Mel iOS 10+
  • Burung pipit
  • G Suite
  • Gmail
  • Peti Masuk Google

Maklumat lanjut

  • Modul Font CSS Tahap 4 Spesifikasi
  • "Ujian CSS3: font-synthesis" oleh Eric Meyer
  • "Bagaimana Mencetak Teks" oleh Chris Coyier