font özelliği, elementin altı farklı yazı fontu özelliği olan fontStyle, fontVariant, fontWeight, fontSize, lineHeight ve fontFamily özelliklerinin hepsinin birden belirlenmesini sağlar.
DOM Sözdizimi
element.style.font = "style variant weight yaziBoyu/satirBoyu yaziTipi"
CSS Sözdizimi
font: style variant weight yaziBoyu/satirBoyu yaziTipi
| style | Yazı tipinin italik olup-olmadığını belirler. Ayrıca bakınız: fontStyle |
| variant | Yazı tipinin küçültülmüş büyük harf olarak gösterilip-gösterilmeyeceğini belirler. Ayrıca bakınız: fontVariant |
| weight | Yazı tipi kalınlığını belirler. Ayrıca bakınız: fontWeight |
| yaziBoyu | Yazı tipi boyunu belirler. Ayrıca bakınız: fontSize |
| satirBoyu | Satır yüksekliğini belirler. Ayrıca bakınız: lineHeight |
| yaziTipi | Yazı tipini belirler. Ayrıca bakınız: fontFamily |
Aşağıdaki örnekler, CSS font özelliğinin bir kaç farklı kullanımını göstermektedir.
<style type="text/css">
/*
ornekFont1 : 1pc (12pt) boyunda, 1.2pc satır yüksekliğine sahip, "Arial" yazıtipinde
font bilgisi tanımlar.
*/
p.ornekFont1
{
font: 1pc/1.2pc Arial;
}
/*
ornekFont2 : Normal görünüme ve normal kalınlığa sahip, eğimli, 10pt boyunda,
20px satır yüksekliğine sahip, "Monotype Corsiva" yazıtipinde font bilgisi tanımlar.
*/
p.ornekFont2
{
font: oblique normal normal 14pt/24px "Monotype Corsiva";
}
/*
ornekFont3 : Küçültülmüş büyük harf olarak kalın ve eğimli 12pt boyunda
"Times New Roman" yazıtipinde font tanımlar.
*/
p.ornekFont3
{
font: italic small-caps bold 12pt "Times New Roman"
}
</style>
<p class="ornekFont1">Lorem ipsum dolor sit amet.</p>
<p class="ornekFont2">Lorem ipsum dolor sit amet.</p>
<p class="ornekFont3">Lorem ipsum dolor sit amet.</p>
Canlı Sonuç
Lorem ipsum dolor sit amet. (ornekFont1)
Lorem ipsum dolor sit amet. (ornekFont2)
Lorem ipsum dolor sit amet. (ornekFont3)