Font-synthesis - Trik CSS

Anonim

The font-systhesisproperti di CSS memberikan petunjuk untuk browser bagaimana menangani font yang tebal dan dicetak miring karakter ketika ditentukan font-familytidak termasuk mereka.

Mari kita ambil Lato dari Google Fonts sebagai contoh. Dikatakan ada 10 variasi font yang berbeda.

Setiap variasi font tersebut secara teknis adalah file font yang berbeda. Jika kita ingin menggunakan bobot dan gaya tertentu, maka kita akan menautkan file tersebut sehingga browser memiliki sesuatu untuk dimuat.

Kalimat ini biasanya membutuhkan empat file font yang berbeda.

Namun, tidak semua font menyertakan file untuk menangani bobot dan gaya. Dalam kasus tersebut, browser akan "mensintesis" tampilan itu sendiri. Browser melakukan yang terbaik semampu mereka, tetapi huruf tebal dan gaya yang palsu terkadang membuat teks kurang terbaca; artinya, kurang terbaca dibandingkan versi yang benar-benar dirancang. Dalam kasus yang paling ringan, kami mungkin melihat karakter tumpang tindih. Dalam kasus yang lebih parah, teks sama sekali tidak dapat dibaca atau bahkan mungkin mengubah artinya - seperti yang dapat terjadi dengan bahasa seperti bahasa Cina, Jepang, Korea, dan skrip logografis lainnya.

Di sanalah font-synthesismasuk. Ia mengontrol jenis huruf mana yang diizinkan untuk disintesis oleh browser.

Sintaksis

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

Dalam bahasa Inggris sederhana, ini berarti font-synthesismenerima:

  • nilai none
  • baik weightataustyle
  • baik weightdanstyle

Perlu dicatat bahwa font-synthesisitu dianggap sebagai properti steno. Menurut spesifikasi, ini adalah kombinasi dari font-synthesis-weightdan di font-synthesis-stylemana keduanya menerima nilai autoatau none. Karena mungkin saja mendapatkan efek yang sama menggunakan steno, itu mungkin cara terbaik untuk melakukannya.

Nilai

  • none: Baik huruf tebal maupun miring tidak dapat disintesis
  • weight: Tebal dapat dibuat oleh browser
  • style: Oblique dapat dibuat oleh browser
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 */

Pemakaian

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

Mungkin ada kasus di mana tidak mengizinkan browser untuk mensintesis tebal dan miring pada seluruh bahasa masuk akal karena salah satunya dapat mengaburkan karakter. Berikut adalah contoh yang diambil dari spesifikasi yang menonaktifkan tampilan font tebal dan miring yang disintesis yang berisi karakter Arab:

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

Demo

Dukungan browser

Pada saat penulisan, caniuse melaporkan cakupan global 20,21% untuk font-synthesisproperti tersebut.

Desktop

YAITU Tepi Firefox Chrome Safari Opera
Tidak Tidak 34+ Tidak 9+ Tidak

Seluler

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

Ingin menggunakan font-synthesisdi email? Kampanye Monitor melaporkan bahwa itu didukung oleh klien berikut ini:

  • Apple Mail 10+
  • Outlook untuk Mac
  • Aplikasi AOL Alto iOS
  • iOS Mail 10+
  • Burung gereja
  • G Suite
  • Gmail
  • Google Inbox

Informasi lebih lanjut

  • Spesifikasi CSS Fonts Module Level 4
  • “Tes CSS3: font-synthesis“ oleh Eric Meyer
  • “How to Italicize Text” oleh Chris Coyier