https://cdn.statically.io/gh/dte-project/a/1e23173799f8ac7c346f345f20de4e5ccb246b1e/shell.v2.min.css
Loading...

Rabu, 22 Mei 2013

Membandingkan tampilan font Open Sans dengan varian regular saja dan font Open Sans dengan varian yang lengkap.

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

Tahoma Fonts Preview
Tahoma

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

Georgia Fonts
Georgia

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

Georgia Fonts
Georgia

Hal Buruk yang Sering Saya Lihat

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

Bebas Neue with Fake Bold Effect
Bebas Neue with Regular Weight
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 memiliki efek tebal secara otomatis. Jadi, jangan lupa untuk mendeklarasikan font-weight dan font-style dengan nilai normal saat Anda sedang menerapkan font kustom yang tidak memiliki 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 tentang cara menggunakan @font-face, baca di artikel Menggunakan @font-face

View more articles

Keyword link

Subscribe via Email

Sign up by email to get the latest news from us..

Contact us

Send a message to us.

Template Hasil Cloning II | Copyright 2015 - 2016 | Rip Code by Shn | ShannenPio Cloning