CSS - Yazı-tipi (Font) Özelliği

Tanımlar

Dil-Kuralı Art-Alan Yazı Yazı-tipi Sınır Dışçizgi Kenarlar Dolgu Liste Tablo

Gelişmiş

Boyut Sınıflandırma Konumlama Sözde-Sınıf Sözde-Öğe Galeri Donukluk Ortam-Türü

Ardaşık Stil Sayfaları (CSS)

26 Ekim 2007

Yazı-tipi (Font) Özelliği

CSS Yazı-tipi özelliği, yazının yazı-tipi ailesini, koyuluğunu, boyunu ve stilini değiştirmemize olanak verir. Not: CSS1'de yazı-tipleri "yazı-tipi" adıyla tanımlanır. Eğer bir taracıyı belirtilen yazı-tipini desteklemiyorsa, varsayılan yazı-tipini kullanır.

Tarayıcı bir yazı-tipini ya yerel olduğu ya da WEB'den indirildiği için tanır. Eğer aynı özellikleri olan iki yazı-tipi varsa tarayıcı birini tümüyle dikkate almaz.
Bir öğede, içindeki her karakterde tarayıcı yazı-tipinin tüm özelliklerini uygular. Yazı-tipinin tüm özellikleri yazı-tipi-ailesi ile kullanılır. Yazı-tipi özelliklerinin bu yazı ailesi kurallarına uygunluğu belirlenir. Uyumlu olan özellikler öğede uygulanır.
yazı-tipi ailesi içinde yazı-tipi yoksa, yazı-tipi kümesindeki alternatif yazı-tipi ve bunun yazı-tipi-ailesi kullanılır.
Bulanan yazı-tipi geçerli ama ilgili karakter için grafik gösterim yoksa, bu durumda alternatif yazı-tipi kullanılır.
Eğer yazı-tipi tümüyle yoksa tarayıcı varsayılan yazı-tipini kullanır.

Her özelliğin aranıp bulunması kuralları aşağıdaki gibidir:

Yazı-tipi stili (font-style) ilk denenen olur. Eğik (italic) yazı için yazı-tipinde (italic) ya da (oblique) sözcükleri varsa geçerlidir. Eğer doğru tanım bulunamazsa yazı-tipi stili hatalı olur.
Daha sonra yazı-tipi- değiştirma (font-variant) denenir. "normal" "küçük-büyük harfler" (small-caps"; tanımının aranmasını gerektirir. Aranan bulunursa tüm küçük harfler küçük büyük harflere çevrilir.
yazı-ağırlığı (font-weight) daha sonra aranan özelliktir. Bu özellik hiç hataya düşmez.
yazı-tipi-boyu (font-size) tarayıcı bağımlı sınırlamalara bağlı bir değerdir. Örneğin değiştirilebilen yazı-tip boyu tarayıcının kayıtlarındaki en yakın yazı-tipi boyuna yuvarlanarak görüntülenir

Özellik	Açıklama	Değerler	IE	F	N	W3C
font	Bir yazı tipinin tüm tanımlarını bir komutta yazabilmek için kullanılan kısaltmadır.	yazı-tipi stili başka yazı-tipi biçimi yazı-tipi koyuluğu yazı-tipi boyu/satır yüksekliği yazı-tipi ailesi caption icon menu message-box small-caption status-bar	4	1	4	1
font-family	Öncelikli yapılmış yazı-tipi ailesi adları ve/ya da bir öğe için aile adı	aile adı soysal aile	3	1	4	1
font-size	yazı-tipi boyutunu belirtir	xx-small x-small small medium large x-large xx-large smaller larger uzunluk %	3	1	4	1
font-size-adjust	Bir ögenin görünen değerinin ilk seçilen yazı-tipi için x-height olmasına denir	none sayı	-	-	-	2
font-stretch	Seçilmiş yazı-tipi ailesini daraltır ya da genişletir	normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded	-	-	-	2
font-style	yazı-tipi stilini atar	normal italic oblique	4	1	4	1
font-variant	Yazının küçültülmüş büyük harflerle ya da normal yazı-tipi ile görüntülenmesi için kullanılır	normal small-caps	4	1	6	1
font-weight	Yazı-tipi için koyuluk ataması yapar	normal bold bolder lighter 100 200 300 400 500 600 700 800 900	4	1	4	1

Yazı-tipi (Font) Özelliği

Yazı-tipi özelliği, bazı sistem yazı-tipleri dışında, bir yazı-tipi tanımının tüm ayarlarını değiştirebilmek için kullanılan kısa tanımlamadır.

p
{
font: 12px arial
}

p
{
font: italic small-caps bold 12px arial
}
p
{
font: oblique small-caps 900 12px/14px arial
}

p
{
font: menu
}

Olası değerler:

font-style font-variant font-weight font-size/line-height font-family	Yazı-tipi için özellikleri belirtir. line-height değeri satırlar arasındaki boşluğu tanımlar. Değer bir sayı, %, ya da bir yazı-tipi boyudur. Varsayılan değer: Tarayıcı bağımlıdır
caption	Başlık denetiminde kullanılan yazı-tiplerini belirtir. (düğmeler, açılanlar (drop-downs), vb.)
icon	Ikon biçimleri tarafından kullanılan yazı-tipleirni belirtir
menu	Açılan menülerde kullanılan yazı-tiplerini tanımlar
message-box	İletişim kutularında kullanılan yazı-tiplerini tanımlar
small-caption
status-bar	Pencerenin durum çubuklarında kullanılan yazı-tiplerini belirtir

Yazı-tipi (Font) Ailesi Özelliği

Yazı-tipi Ailesi (font-family) özelliği önceliğe göre dizilmiş yazı-tipi ailesi listesi ve/ya da bir öğe için soysal aile adıdır. Tarayıcı bulduğu ilk değeri kullanır. Yazı-tipi ailesi değerleri iki tanedir:

Aile-adi (family-name): Yazı-tipi ailesinin adı "times", "courier", "arial", gibi.
soysal-aile (generic-family): soysal-ailenin adı "serif", "sans-serif", "cursive", "fantasy", "monospace" gibi.

Not: Her değeri virgülle ayırın, ve soysal adı her zaman son seçenek olarak yerleştirin. Not: Eğer aile adının içinde boşluk varsa, tırnak işaretleri arasında yer almalıdır. HTML içinde "style" niteliğiyle tanımlanacak olursa tek tırnak içinde yazılmalıdır.

<font-family> "gill" ve "helvetica" yazı-tipi aileleridir.
<generic-family>

'serif' (örneğin Times)
'sans-serif' (örneğin Helvetica)
'cursive' (örneğin Zapf-Chancery)
'fantasy' (örneğin Western)
'monospace' (örneğin Courier)

body
{
font-family: courier, serif
}

p
{
font-family: arial, "lucida console", sans-serif
}

<p style="font-family: arial, 'lucida console', sans-serif">

Olası değerler:

Aile-adı soysal-aile	Öncelik tanınmış yazı-tipi ailesi listesi ve/ya da bir öğe için soysal aile adı
	Varsayılan değer: Tarayıcı bağımlı

Yazı-tipi boyu (font-size) özelliği

Yazı-tipi boyu özelliği, yazı-tipinin boyunu belirler.

mutlak-boy: <absolute-size> sözcüğü tarayıcıda yazı-tipi boylarının saklandığı bir değerdir. Uygun değerler: [ xx-small | x-small | small | medium | large | x-large | xx-large ] olur. Bir bilgisayar ekranında 1.5 ayarlama oranı iki komşu yazı-tipi boyuna göre düzenlenir. Örneğin 'medium' 10pt ise 'large' yazı-boyu 15pt olabilir.
göreceli-boy: <relative-size> sözcüğün yorumlanması yazı-tipi boyları tablosundaki değerler göre belirlenir. Olası değerler: [ larger | smaller ] olur. Örneğin eğer önceki öğenin yazı-tipi boyu "medium" olmuşsa, "larger" değeri yazı-tipi boyunu büyük yapar. Eğer önceki öğe değeri tablodaki değerlere uygun değilse, tarayıcı istediği biçimde yorumlayabilir.

body
{
font-size: x-large
}

p
{
font-size: 10px
}

Olası değerler:

xx-small x-small small medium large x-large xx-large	Yazı-tipi boyunu değişik yazı-tipi boylarına ayarlar. Varsayılan değer: medium
smaller	Aile öğesinin boyundan daha küçük bir boy tanımlamak için kullanılır.
larger	Aile öğesinden daha büyük bir yazı-tipi tanımlamak için kullanılır
uzunluk	Yazı-tipi boyunu değişmez bir uzunluğa ayarlar

Yazı-tipi Boyu ayarlama (font-size-adjust) Özelliği

Bir yazı-tipinin küçük "x" harfinin yüksekliğiyle yazı-tipi yüksekliği arasındaki orana görünüş değeri (aspect value) denir. Eğer görünüş değeri yüksekse yazı-tipi küçük değerlere indirildiğinde daha okunaklı olur. Örneğin: Verdana için görünüş değeri 0.58 ise (Bu yazı-tipinin yüksekliği 100px'dir ve x-yüksekliği ise 58px'dir). "Times New Roman" yazı-tipi için görünüş değeri 0.46'dır. Buna göre Verdana Times New Roman yazı-tipine göre küçük boyutlarda daha okunaklıdır.
Yazı-tipi boy ayarlama özelliği, ilk seçilen yazı-tipindeki x-yüksekliğinin korunduğu görünüş değerini belirler.

h2
{
font-size-adjust: 0.58
}

Olası değerler:

none

Varsayılan değer. Eğer yazı-tipi bulunamıyorsa, yazı-tipi için x-yüksekliği niteliğini korumaya kalkmayın.

sayı

Yazı-tipi için görüntü oranını tanımlar. Bunu için kullanılacak formül şöyledir:

ilk seçenekteki yazı-tipinin-boyu * (yazı-tipi-boyu-ayarlaması / var-olan-yazı-tipinin-görünen-boyu) = var-olan-yazı-tipie-uygulanacak-yazı-tipi-boyu'dur.
Örnek:

Eğer 14px Verdana (görünen değeri 0.58 olan) varsa, ama başka bir yazı-tipi için görünen oran 0.46 olarak tanımlıysa, yerine konan yazı-tipi boyu:
14 * (0.58/0.46) = 17.65px olur.

Yazı-tipi germe (font-stretch) Özelliği

Yazı-tipi germe özelliği, bir yazı-tipi ailesini daraltır ya da genişletir.
Not: Yazı-tipi ailelerinin daraltılması ya da genişletilmesi ancak yatay olarak gerçekleşir.

h2
{
font-stretch: ultra-condensed
}

Olası değerler:

normal	Varsayılan değer. Daralma ya da genişleme parametresini normal değere atar.
wider	Genişleme değerini bir sonraki genişleme parametresine taşır
narrower	Daralma değerini bir önceki daralma parametresine indirger
ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded	Yazı-tipi ailesinin daralma ya da genişleme değerlerini ayarlar. "ultra-condensed" en daraltılmış halidir. "ultra-expanded" ise en geniş biçimidir

Yazı-tipi Stil (font-style) Özelliği

Yazı-tipi stil özelliği, yazı-tipinin stilini ayarlamakta kullanılır.

Yazi-tipi Stili yazı-tipi ailesindeki normal, eğik ve kalın arasından bir değeri alabilir.

body
{
font-style: italic
}

Olası değerler:
normal: Varsayılan değer. Tarayıcı normal yazı-tipini görüntüler. italic: Tarayıcı yatık yazı-tipi görüntüler. obliquei: Tarayıcı kalın yazı-tipi görüntüler.

Yazı-tipi Değiştirme (fonr-variant) Özelliği

Yazı-tipi değiştirme (font-variant) özelliği yazıyı küçültülmüş büyük harflerle göstermek için kullanılır. Bunu anlamı tüm küçük harflerin büyük harfe çevrilmiş olmasıdır. Fakat küçültülmüş büyük harflerin yazı-tipi boyu diğer harflere göre daha küçüktür.

p
{
font-variant: small-caps
}

Olası değerler:
normal: Varsayılan değer. Tarayıcı normal yazı-tipi görüntüler. small-caps: Tarayıcı küçültülmüş büyük harfleri görüntüler.

Yazı-tipi Kalınlığı (font-weight) Özelliği

Yazı-tipi kalınlığı özelliği görüntülenen karakterlerin ne kadar kalın ya da ince olacağını tanımlar.

p
{
font-weight: bold
}

Olası değerler:

normal	Varsayılan değer. Normal karakterleri tanımlar
bold	Kalın karakterleri tanımlar
bolder	Daha kalın karakterleri tanımlar
lighter	Daha ince karakterleri tanımlar
100 200 300 400 500 600 700 800 900	İnceden kalına doğru karakterleri tanımlar. Burada 400 normal ile aynıdır. 700 ise bold ile aynı anlama gelir.

Sayısal değerlerin dışında kalan değerler yazı-tipi ailesindeki yazının koyuluğunu belirten değerlerdir. Aşağıdaki kurallar bu tür atamaların nasıl yapıldığını gösterir:

Eğer bir yazı-tipi ailesi dokuz sayısal değerden oluşuyorsa yazı-tipi ağırlıkları doğrudan bu değerleri kullanır.
Eğer "medium" (orta) varsa sayısal değeri 500 olur.
Eğer "bold" (koyu) varsa bunun değeri 700 olur.
Eğer yazı-tipi ailesinde dokuzdan az ağırlık varsa, aralardaki boşlukları dolduracak varsayılan algoritma şöyledir:

Eğer 500 sayısının karşılığı yoksa, 400 sayısının yazı-tipi ağırlığıyla aynı olur. Eğer 600, 700, 800 ya da 900 sayılarından birinin karşılığı yoksa, bir sonraki daha koyu yazı-tipi ağırlığıyla aynı değeri taşır. Eğer 300, 200, 100 sayısal değerleri atanmamışsa, bir önceki daha açık yazı-tipi ağırlığına atanır (Bu tür yazı ağırlığı bulunamiyorsa daha koyusu kullanılır).