Son zamanlarda SiFR ve Cufon gibi replacement çözümleri ile bu problemin çözümü nispeten mümkün hale geldi fakat uygulama konusunda halen bir takım sıkıntılar yaşanabiliyor.

Aslında CSS 2 ile gelen fakat daha sonra CSS 2.1 ile kaldırılan @font-face özelliği ile dışarıdan font yükleyerek bunu web sayfasında kullanabilmek mümkün. Özelliğin CSS 2.1′de kaldırılmasından dolayı modern tarayıcılar olarak nitelendireceğimiz Firefox, Safari, Opera ve Chrome dörtlüsünde css içinde @font-face kullanabilmek için son sürümlerin yüklü olması gerekiyor. Bu dörtlü CSS3 sayesinde TTF uzantılı fontları destekliyor.

Internet Explorer farklı bir dosya formatı kullanmak (.eot) kaydıyla v4 üstü tüm sürümlerde bu özelliği destekliyor.

@font-face ile ilgili daha fazla bilgiyi Fatih Hayrioğlu’nun Not Defteri‘nde bulabilirsiniz.

Important Nedir?

Important, bir CSS özelliğinin(property) önceliğini(priority) yükselten bir özelliktir. Bir diğer değişle inheritance yani miras alma yoluyla CSS’e gelen özellikleri devre dışı bırakarak important kullandığınız satırdaki özelliği öncelikli olarak uygular.

Important’a Neden İhtiyaç Duyuyoruz?

Örneğin aynı HTML tagına iki duruma göre farklı özellik vermemiz gerektiğini düşünelim:

Buton isimli bir div’imiz olduğunu ve bununda varsayılan özelliğinin kapalı olduğunu vurgulayan gri bir fon resmi olsun:

<div class="buton"></div>

.buton {width:100px; height:20px; background: url('images/gray.png');}

Bu butonun fon resmini aşağıdaki gibi değiştirmeye çalıştığımızda istediğimiz sonucu alamayabiliriz:

<div class="buton acik"></div>

.acik {background: url('images/green.png');}

Bu durumlarda important özelliği devreye girmelidir. Öncelikli olan stilinize aşağıdaki gibi !important özelliğini eklediğinizde sorun çözülecektir.

.acik {background: url('images/green.png')!important;}