font-family Özelliği

font-family özelliği yazı tipi ailesini belirler.

Sözdizimi

seçici {
	font-family: yazı tipi adı;
}

Not

Eğer yazı tipi adı boşluk içeriyorsa, örneğin, Times New Roman, tek veya çift tırnak içine alınmalıdır.

Not

Virgülle ayrılarak benzer birkaç yazı tipi listelenebilir. Tarayıcı listedeki ilk yazı tipiyle karşılaştığında, kullanıcının bilgisayarında olup olmadığını kontrol eder. Eğer böyle bir yazı tipi yoksa, listedeki bir sonraki yazı tipi alınır ve yine varlığı analiz edilir. Bu nedenle, birden fazla yazı tipi, bunlardan en az birinin istemci bilgisayarında bulunma olasılığını artırır.

Liste genellikle, yazı tipi türünü tanımlayan (tüm yazı tipleri bir türe aittir) bir anahtar kelimeyle sonlandırılır - serif, sans-serif, cursive, fantasy veya monospace. Tarayıcı, kullanıcının bilgisayarında belirtilen yazı tiplerinden hiçbirini bulamazsa, belirtilen türden bir yazı tipi seçer.

Yazı Tipi Türleri

Tür	Açıklama
`serif`	Kuyruklu yazı tipi.
`sans-serif`	Kuyruksuz yazı tipi.
`cursive`	Eğik yazı tipi.
`fantasy`	Güzel kıvrımları ve olağandışı efektleri olan dekoratif yazı tipi.
`monospace`	Her karakterin genişliğinin aynı olduğu eşaralıklı yazı tipi.

Varsayılan değer: tarayıcıda varsayılan olarak ayarlanmış yazı tipi. Genellikle bu Times New Roman'dır.

Örnek

Yazı tipi ailesini Arial olarak ayarlayalım:

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: Arial;
}

Örnek

Yazı tipi ailesini Times New Roman olarak ayarlayalım. Yazı tipi adı birkaç kelimeden oluştuğu için tırnak içine alıyoruz:

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: "Times New Roman";
}

Örnek

Yazı tipini serif grubundan bir yazı tipi olarak ayarlayalım (büyük olasılıkla Times New Roman alınacaktır):

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: serif;
}

Örnek

Yazı tipini sans-serif grubundan bir yazı tipi olarak ayarlayalım (büyük olasılıkla Arial alınacaktır):

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: sans-serif;
}

Örnek

Yazı tipini fantasy grubundan bir yazı tipi olarak ayarlayalım (böyle bir yazı tipinin olmaması nedeniyle sizde çalışmayabilir):

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: fantasy;
}

Örnek

Yazı tipini monospace grubundan bir yazı tipi olarak ayarlayalım (harfler aynı boyutta olacaktır):

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: monospace;
}