Web sitelerimizi tasarlarken en önemli kısımlardan bir tanesi de yazı tipi yani font seçimidir. Font seçimini yaptıktan sonra yazılarımıza farklı özelliklerde katabiliriz. Bu yazımızda CSS yazı tipi işlemleri konusunu işleyeceğiz.

CSS’te yapabileceğimi bir çok yazı tipi işlemi vardır. Yazı tipleri farklı stillerde ve farklı boyutlarda yazılabilir. Hemen sırasıyla bunları nasıl yapabileceğimizi görelim.

CSS Font-family (Yazı Tipi)

CSS’te metin yazı tipini belirlemek için font-family etiketini kullanırız. Örnek kullanımını görelim. 

<p class="yazi1">Evrensel Kod</p>
.yazi {
  font-family:sans-serif;
}  

Web sitenizde farklı özel fontlar kullanmak isteyebilirsiniz. Fakat sizin kullanmak istediğini fontlar kullanıcılarınızın bilgisayarında bulunamayabileceği için istediğiniz görüntüyü elde edemeyebilirsiniz. Bunun önüne geçebilmek için tüm bilgisayarlarda bulunan “web-güvenli fontlar” vardır. Şimdi bu güvenli fontları görelim.

  • serif
  • sans-serif
  • cursive
  • fantasy
  • monotype

Ayrıca bu fontları kullanırken alternatifli olarak kullanmanız tavsiye edilir. Sitenin açıldığı tarayıcı ilk fontu desteklemiyorsa, ikinci fontu gösterecektir. Örnek kullanımı : 

.yazi {
  font-family: Georgia, 'Times New Roman', Times, serif;
}  

CSS Font-size (Yazı Boyutu)

Font-size kullanarak metin boyunu değiştirebilirsiniz. Sayısal değerler kullanabileceğiniz gibi, yazı ile de belirleyebilirsiniz. Alabileceği değerleri görelim.

  • Ön Tanımlı Değerler
    1. xx-small : Çok küçük boyut
    2. x-small : Daha küçük boyut
    3. small : Küçük boyut
    4. medium : Normal boyut
    5. large : Büyük boyut
    6. x-large : Daha büyük boyut
    7. xx-large : En büyük boyut
    8. smaller : Parent elementine göre daha küçük
    9. larger : Parent elementine göre daha büyük
  • Sayısal Değerler
    1. Oran : Parent elementin boyutuna göre oran. 50%, 100% vb..
    2. Ölçü birimi : Pixsel, em değerini belirten sayı. 16px, 10em vb..
Bu yazı dikkatini çekebilir.   CSS Tablo Özellikleri (Table)

Örnek kullanımı : 

.yazi1{
  font-size: 16px;
}
.yazi2{
  font-size: small;
}
.yazi3{
  font-size: larger;
}

CSS Font-weight (Yazı Kalınlığı)

Font-weight kullanarak yazı kalınlığını belirleyebilirsiniz. Yazı boyutunda olduğu gibi sayısal değerler kullanabileceğiniz gibi, yazı ile de belirleyebilirsiniz. Hemen font-weight alabileceği değerleri görelim.

ÖzellikTanım
normalNormal karakter kalınlığındadır.
boldKalın karakterlidir.
bolderDaha kalın karakterler tanımlar.
lighterDaha ince karakter tanımlar.
100
200
300
400
500
600
700
800
900		Seçilen değerlere göre karakterlerin kalınlığını değiştirir.
initialÖzelliğin varsayılan değeridir.
font-weight alabileceği değerler

Örnek kullanımı :

.yazi1{
  font-weight: normal;
}
.yazi2{
  font-weight: lighter;
}
.yazi3{
  font-weight: 400;
}

CSS Font-style (Yazı Stili)

Font-style ile metni eğimli (italic) yapmanıza yarar. Alabileceği 3 farklı değer vardır. Bunlar;

  • normal : Metin normal olarak gösterilir.
  • italic : Metin italik olarak gösterilir.
  • oblique : Metin eğik yazar (eğik italikle çok benzer, ancak daha az desteklenmektedir).

Örnek kullanımları : 

.yazi1{
  font-style: normal;
}
.yazi2{
  font-style: italic;
}
.yazi3{
  font-style: oblique;
}

Font (Kısa Kullanım)

Tüm CSS font işlemlerini bu etiket ile birlikte tek satırda yazabilirsiniz.

Örnek kullanımı : 

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

Bu yazımızda CSS yazı tipi işlemleri konusunu işledik. Diğer CSS derslerimizi de okumak isterseniz buradan tümüne ulaşabilirsiniz.