@font-face ile bir fontun diğer stillerini kullanma

@font-face ile webde kullandığınız özel fontların bold, italik, normal veya bold italic versiyonlarını kullanmak isteyebilirsiniz. Ancak <b>, <strong> ile kalın, <i> ile italik yapmak istediğinizde fontu zorlayarak kalınlaşmış veya italik fontlar elde etmeye çalıştığınızda kırık, pikselize bir görüntü ortaya çıkar. Yani olması gerektiği gibi göremezsiniz karakterleri. Çünkü tarayıcılar fontu zorlayarak kalın veya italik olarak göstermeye çalışırlar.

Tek font aşağıdaki gibi kullanıyor. Diğer stilleri (bold, italik, bold italik) için html tagları ile <strong> <i> şeklinde fontu zorlayarak kullanabiliriz.CSS kodu aşağıdaki gibi olur:

Yukarıdaki kodda olduğu gibi siz sadece normal kalınlıktaki bir fontu font-face ile kullanıp tarayıcının zorlamasıyla karakterlere stil vermek istediğinizde aşağıdaki gibi bir görünüm ortaya çıkar.

browser-faux

Her fontun ayrı ayrı normal, bold, italik ve bold italik versiyonları vardır/olmalıdır. Fontun bu versiyonlarını tanıtırsanız karakterleriniz çok daha keskin, düzgün ve olması gerektiği şekliyle aşağıdaki gibi temiz, güzel ve düzenli görünür:

multiple-fonts

CSS kodunuz da aşağıdaki gibi olmalı ve bu fontun diğer stilleri de sayfaya import edilmelidir.

Bu şekilde fontunları sayfaya import ediyoruz. ve sayfamızda artık normal, italik, bold, bold italik fontlarımızı tanıtılmış oldu. Artık aşağıdaki gibi fontunuzu vermeniz yeterli, cümle içindeki bold, italik, bold italik ve normal kalınlıktaki kelimleriniz olması gerektiği şekilde düzgün, temiz ve güzel gözükecek.

 

Artık karakterleriniz çok temiz ve güzel gözükmekle birlikte her bir fontu ayrı ayrı sayfaya import ettiğimiz için sayfalara ek bir trafik getirecektir. Eğer fontlarınızın her biri çok büyük dosya büyüklüklerine sahipse sayfanız çok geç açılacaktır. Yukarıdaki örneklerdekine benzer fontların dosya büyüklükleri çok fazla olmaz. Ancak karalama, şekilli, tebeşir efekti gibi fontlar çok daha fazla yer kaplar. Kullandığınız her bir fontun sitenize yükü 20-80kb büyüklükten fazla olmamalıdır.

Tüm bu düzenlemelerden sonra karakterlerimiz gerçekten güzel gözüküyor değil mi?

 

 

 

 

Kaynak: pencilscoop

 

 

Bir Cevap Yazın