CSS Font Style (Yazı Tipi Stilleri)

Font Style

Font-style özelliği çoğunlukla italik metni belirtmek için kullanılır.

Bu özelliğin üç değeri vardır:

  • normal – Metin normal şekilde gösterilir
  • italic – Metin italik olarak gösterilir
  • oblique – Metin “eğimlidir” (eğik italiğe çok benzer, ancak daha az desteklenir)
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}
</style>
</head>
<body> 

<p class="normal">Normal Yazı Tipi.</p>
<p class="italic">Italic Yazı Tipi.</p>
<p class="oblique">Oblique Yazı Tipi.</p>

</body>
</html>

Font Weight

Font-weight özelliği bir yazı tipinin kalınlığını belirtir:

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-weight: normal;
}

p.light {
  font-weight: lighter;
}

p.thick {
  font-weight: bold;
}

p.thicker {
  font-weight: 900;
}
</style>
</head>
<body>
 
<p class="normal">Paragraf.</p>
<p class="light">Paragraf.</p>
<p class="thick">Paragraf.</p>
<p class="thicker">Paragraf.</p>

</body>
</html>

Font Variant

Font-variant özelliği, bir metnin küçük büyük harf yazı tipinde görüntülenip görüntülenmeyeceğini belirtir.

Küçük harfli yazı tipinde tüm küçük harfler büyük harflere dönüştürülür. Ancak dönüştürülen büyük harfler, metindeki orijinal büyük harflerden daha küçük bir yazı tipi boyutunda görünür.

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}
</style>
</head>
<body>
 
<p class="normal">Paragraf yazı bir şeyler.</p>
<p class="small">Paragraf yazı bir şeyler.</p>

</body>
</html>

21 Ekim 2023
Was this article helpful?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir