Css Font Özellikleri

Merhaba arkadaşlar,

Uzun zamandır işlerimin yoğunluğundan dolayı yapamadığım paylaşımlarıma somut olarak işlemler yapabileceğiniz ve web sayfalarının en önemli kısımlarından biri olan font ve özellikleriyle devam edeceğim.Bu paylaşımda css ile fontları nasıl ve ne şekillerde değiştirebiliriz onu öğreneceğiz.

İlk olarak Css’de font için kullanabileceğiniz özellikler aşağıdaki gibidir,

i . Color
ii . Font Family
iii . Font Size
iv . Font Weight
v . Font Style
vi . Font Variant
vii . Font

Şimdi adım adım yukarıdaki değelerin nasıl uygulanacağına geçebiliriz.

1 – Color :

Bu özellik sayesinde web sayfalarında yazılarımıza istediğimiz rengi tanımlayabiliriz.Örnekle açıklayacak olursak aşağıdaki satırlar net bir uygulama olacaktır.

p.header { color:#FF0000;} // Bu şekilde header bölümünde yazılarımız kırmızı olarak yazacaktır.

2 – Font Family :

Metinlerde kullanacağımız font ailelerini belirlemek için kullanacağımız özelliktir,Kullanımı hakkında aşağıdaki örneğe bakabilirsiniz.

p{

color:#FF0000;

 font-family:"Times New Roman", Times, serif; } // Bu durumda yazdığımız yazılar kırmızı ve Times New Roman ailesiyle yazılacaktır.

3 – Font Size :

Bu özellik yazdığımız yazıların boyutlarını belirlemekte kullanacağımız özelliktir,Kullanımının farklı çeşitleri vardır,Bu farklı kullanımlar aşağıdaki örnekte belirtilmiştir.

p {font-size:14px;} // Bu şekilde yazıldığında font boyutuna tam kontrol sağlanabilir fakat browser değiştikçe sorunlarla karşılaşmak mümkündür.

p {font-size:2.5em;} // Bazı tasarımcılar browserlarda yaşanan boyut farklılıklarından dolayı "em" değeri kullanarak fontların boyutlarını belirleme yöntemlerini denemektedir.

p {font-size:150%;} // Fontları bu şekildede boyutlandırmak mümkündür.

[/css]

Siz gerekli düzenlemelerden sonra farklı browserlarda yaptığınız testlerle hangisinin sizin için uygun olduğunu daha açık şekilde görebilirsiniz.

4 – Font Weight :

Bu özellik sayesinde font değerimizin kalınlığını değiştirebiliriz,Kullanımı aşağıdaki örneklerde olduğu gibidir ve özellikle linklerde veya içeriğimizde anahtar kelimelerimizi ön plana çıkarırken kullandığımız bir özelliktir.

p.normal {font-weight:normal;} // Kalınlık değeri belirlenmemiştir.
p.thick {font-weight:bold;} // Yazdığımız yazılar kalın olarak görünecektir.
p.thicker {font-weight:900;} // Kalınlık değeri üzerinde oynamalar yapabileceğimiz kullanım şekli.

5 – Font Style :

Yazdığımız yazının eğik veya düz olmasını ayarladığımız kod satırıdır.Kullanımı aşağıdaki gibidir.

p.normal {font-style:normal} // Yazdığımız yazı standart olarak gösterilecektir.
p.italic {font-style:italic} // Yazımız bu satır ile italik (yatay) olarak gözükecektir.
p.oblique {font-style:oblique} // İtalic özelliğinden bir farkı yoktur.

6 – Font Variant :

Yazdığımız yazının her karakterine müdahele edebildiğimiz özelliktir,Yanlış anlaşılmasın sadece her karakterin büyük yada küçük olduğunu belirliyebiliyoruz ve kullanımıda aşağıdaki gibidir.

p.small
{
font-variant:small-caps; // Alabileceği değerler : normal , small-caps , inherit
}

7 – Font :

Bütün font özelliklerini kullanabileceğimiz bir sınıftır,Aynı anda metnimize kalınlık , renk veya diğer özellikleri tanımlayabiliriz.Örnek kullanım aşağıdaki gibidir.

p
{
font:italic bold 12px/30px Georgia, serif;
}

Bu şekilde css ile font tagımızda yapabileceğimiz uygulamaları öğrenmiş olduk,Bundan sonraki paylaşımımda sizlere css ile listeleme şekillerini anlatacağım.

Soru ve düşünceleriniz benim için çok önemlidir unutmayınız…