Jangan Mendeklarasikan `Font-Weight` Dan `Font-Style` Pada Font Yang Tidak Mempunyai Varian Tersebut - Dewa Blogger

Halaman

    Social Items

Buy Now
Membandingkan tampilan font Open Sans dengan varian regular saja dan font Open Sans dengan Jangan Mendeklarasikan `font-weight` dan `font-style` pada Font yang Tidak Memiliki Varian Tersebut

Ada satu hal yang mungkin tidak Anda sadari bahwa ketika Anda menyatakan font-family pada teks, maka peramban akan mencoba untuk membuat pengaruh bold dan italic palsu ketika peramban tidak berhasil menemukan file font bold dan italic pada font terkait. Sebagai contoh, Tahoma hanya mempunyai dua varian, yaitu regular dan bold, sehingga hasil tampilan teks pada peramban hanya akan terlihat manis pada model teks biasa dan tebal:

Membandingkan tampilan font Open Sans dengan varian regular saja dan font Open Sans dengan Jangan Mendeklarasikan `font-weight` dan `font-style` pada Font yang Tidak Memiliki Varian Tersebut
Tahoma

Karena semenjak awal varian italic tidak pernah ada pada keluarga font Tahoma, maka peramban mencoba untuk merekayasa dimensi font tersebut menjadi italic. Akan tetapi tetap saja, pengaruh italic yang Anda lihat bukanlah italic yang sesungguhnya. Perbedaan akan terlihat terang pada jenis-jenis font yang mempunyai lebih banyak varian. Misalnya Georgia:

Membandingkan tampilan font Open Sans dengan varian regular saja dan font Open Sans dengan Jangan Mendeklarasikan `font-weight` dan `font-style` pada Font yang Tidak Memiliki Varian Tersebut
Georgia

Georgia mempunyai empat varian, termasuk di dalamnya yakni regular, italic, bold bahkan bold-italic. Hal ini memungkinkan peramban untuk menampilkan dimensi font dalam “porsi” yang sempurna pada varian font minimal. Yaitu regular, italic, bold dan bold-italic:

Membandingkan tampilan font Open Sans dengan varian regular saja dan font Open Sans dengan Jangan Mendeklarasikan `font-weight` dan `font-style` pada Font yang Tidak Memiliki Varian Tersebut
Georgia

Hal Buruk yang Sering Saya Lihat

Hal jelek yang sering Saya lihat yakni bahwa seorang pengguna mencoba untuk menyatakan font-weight:bold atau font-style:italic pada keluarga font yang tidak mempunyai varian tersebut atau pada keluarga font yang mempunyai varian tersebut, akan tetapi varian selain regular tidak pernah disertakan di dalam deklarasi @font-face:

Membandingkan tampilan font Open Sans dengan varian regular saja dan font Open Sans dengan Jangan Mendeklarasikan `font-weight` dan `font-style` pada Font yang Tidak Memiliki Varian TersebutMembandingkan tampilan font Open Sans dengan varian regular saja dan font Open Sans dengan Jangan Mendeklarasikan `font-weight` dan `font-style` pada Font yang Tidak Memiliki Varian Tersebut
Gambar 1: Mendeklarasikan ketebalan font heading pada situasi yang salah. Gambar 2: Dimensi font yang sesungguhnya.Keterangan: Bebas Neue pada judul dan Franklin Gothic Medium pada paragraf.

Pada keadaan normal, elemen heading akan mempunyai pengaruh tebal secara otomatis. Jadi, jangan lupa untuk mendeklarasikan font-weight dan font-style dengan nilai normal ketika Anda sedang menerapkan font kustom yang tidak mempunyai varian lengkap untuk elemen ini:

h1,h2,h3,h4,h5,h6 {   font-family:"Bebas Neue",Sans-Serif;   font-style:normal;   font-weight:normal; }

Mencari tutorial wacana cara memakai @font-face, baca di artikel Menggunakan @font-face


Sumber https://www.dte.web.id/

Jangan Mendeklarasikan `Font-Weight` Dan `Font-Style` Pada Font Yang Tidak Mempunyai Varian Tersebut

Membandingkan tampilan font Open Sans dengan varian regular saja dan font Open Sans dengan Jangan Mendeklarasikan `font-weight` dan `font-style` pada Font yang Tidak Memiliki Varian Tersebut

Ada satu hal yang mungkin tidak Anda sadari bahwa ketika Anda menyatakan font-family pada teks, maka peramban akan mencoba untuk membuat pengaruh bold dan italic palsu ketika peramban tidak berhasil menemukan file font bold dan italic pada font terkait. Sebagai contoh, Tahoma hanya mempunyai dua varian, yaitu regular dan bold, sehingga hasil tampilan teks pada peramban hanya akan terlihat manis pada model teks biasa dan tebal:

Membandingkan tampilan font Open Sans dengan varian regular saja dan font Open Sans dengan Jangan Mendeklarasikan `font-weight` dan `font-style` pada Font yang Tidak Memiliki Varian Tersebut
Tahoma

Karena semenjak awal varian italic tidak pernah ada pada keluarga font Tahoma, maka peramban mencoba untuk merekayasa dimensi font tersebut menjadi italic. Akan tetapi tetap saja, pengaruh italic yang Anda lihat bukanlah italic yang sesungguhnya. Perbedaan akan terlihat terang pada jenis-jenis font yang mempunyai lebih banyak varian. Misalnya Georgia:

Membandingkan tampilan font Open Sans dengan varian regular saja dan font Open Sans dengan Jangan Mendeklarasikan `font-weight` dan `font-style` pada Font yang Tidak Memiliki Varian Tersebut
Georgia

Georgia mempunyai empat varian, termasuk di dalamnya yakni regular, italic, bold bahkan bold-italic. Hal ini memungkinkan peramban untuk menampilkan dimensi font dalam “porsi” yang sempurna pada varian font minimal. Yaitu regular, italic, bold dan bold-italic:

Membandingkan tampilan font Open Sans dengan varian regular saja dan font Open Sans dengan Jangan Mendeklarasikan `font-weight` dan `font-style` pada Font yang Tidak Memiliki Varian Tersebut
Georgia

Hal Buruk yang Sering Saya Lihat

Hal jelek yang sering Saya lihat yakni bahwa seorang pengguna mencoba untuk menyatakan font-weight:bold atau font-style:italic pada keluarga font yang tidak mempunyai varian tersebut atau pada keluarga font yang mempunyai varian tersebut, akan tetapi varian selain regular tidak pernah disertakan di dalam deklarasi @font-face:

Membandingkan tampilan font Open Sans dengan varian regular saja dan font Open Sans dengan Jangan Mendeklarasikan `font-weight` dan `font-style` pada Font yang Tidak Memiliki Varian TersebutMembandingkan tampilan font Open Sans dengan varian regular saja dan font Open Sans dengan Jangan Mendeklarasikan `font-weight` dan `font-style` pada Font yang Tidak Memiliki Varian Tersebut
Gambar 1: Mendeklarasikan ketebalan font heading pada situasi yang salah. Gambar 2: Dimensi font yang sesungguhnya.Keterangan: Bebas Neue pada judul dan Franklin Gothic Medium pada paragraf.

Pada keadaan normal, elemen heading akan mempunyai pengaruh tebal secara otomatis. Jadi, jangan lupa untuk mendeklarasikan font-weight dan font-style dengan nilai normal ketika Anda sedang menerapkan font kustom yang tidak mempunyai varian lengkap untuk elemen ini:

h1,h2,h3,h4,h5,h6 {   font-family:"Bebas Neue",Sans-Serif;   font-style:normal;   font-weight:normal; }

Mencari tutorial wacana cara memakai @font-face, baca di artikel Menggunakan @font-face


Sumber https://www.dte.web.id/