Web Tasarım ve Prog.Stil Şablonu (CSS) Css Font Özellikleri

Font özellikleri web sayfasındaki metinlerin yazı tipi, boyutu, kalınlık ayarları gibi özelliklerini değiştrmek için kullanılır.

Özellik	Açıklama
font-family	Bu özellik bir metne ait yazı tipini seçmek için kullanılır.
font-size	Metnin boyutunu ayarlamak için kullanılır.
font-weight	Metnin kalınlık, incelik ayarlarının yapılmasını sağlar
font-style	Metni eğik yada normal yapmak için kullanılır.
line-height	Metin içindeki satırların arasındaki mesafeyi ayarlamak için kullanılır.
font	Fonta ait özelliklerin kısa yazımı için kullanılır.

 

 

Font-family

“font-family” özelliği, bir metne ait font ailesini belirlemeye yarar. Bunu yaparak yazı tipimizi seçmiş oluruz. Bu özellik birden fazla font ailesi ismi içerebilir, her font ailesi ismi virgülle ayrılır.

Örnek 1:

p { font-family: Verdana, Arial, Helvetica, sans-serif; } 

Yukarıdaki örnekte tarayıcı ilk önce Verdana yazı tipinin tarayıcı tarafından desteklendiğine bakacaktır. Desteklenmediği takdirde sırayla diğerlerini deneyecektir.

Örnek 2:

h1 { font-family: Georgia, "Times New Roman", serif; } 

Bu örnekte ise görüldüğü üzere “Times New Roman” tırnak içine alınmıştır. Eğer bir font ailesinin adı bir kelimeden fazla ise tırnak işaretleri içine alınmalıdır.

 

 

Font-size

Metnin boyutunu ayarlamak için kullanılır. Boyut piksel(px)" , yüzde(%) ve ya (em) olarak belirtilebilir.

Örnek :

body {font-size:100%;} /*varolan font boyutunun tamamını(%100) kullan. */
h1 {font-size:2.5em;} /*h1 için font boyutu(2.5em=2.5*16px =40px)belirler. */
h2 {font-size:25px;} /*h2 için font boyutu(25px) belirler.*/

 Metin boyutunu ayarlamak için aşağıdaki değerlerde kullanılabilir.

Değer	Açıklama
medium	Font boyutunu medium olarak ayarlar.
xx-small	Font boyutunu xx-small olarak ayarlar.
x-small	Font boyutunu x-small olarak ayarlar.
small	Font boyutunu small olarak ayarlar.
large	Font boyutunu large olarak ayarlar.
x-large	Font boyutunu x-large olarak ayarlar.
xx-large	Font boyutunu xx-large olarak ayarlar.
smaller	Font boyutunu parent (bir üst) elementin metin boyutundan daha küçük olarak ayarlar.
larger	Font boyutunu parent (bir üst) elementin metin boyutundan daha büyük olarak ayarlar.
length	Font boyutunu , px, cm gibi sabit bir boyutta ayarlar.
%	Font boyutunu, parent elementin boyutunun yüzdesi olarak ayarlar.
initial	Font boyutunu, varsayılan boyuta ayarlar.
inherit	Font boyutunu, parent elementin boyutuyla aynı olacak şekilde ayarlar.

 

 

 Font-weight

Fontun kalınlık, incelik değerini belirlemeye yarar.  bold, bolder, normal ve lighter değerlerini alabilir.

Örnek: p etiketi içinde yer alan yazının tamamının kalın yazılması için aşagıdaki gibi kullanılabilir.

p{ font-weight: bold; }

 

 

Font-style

Metni eğik (italik), az eğik veya normal yapmak için kullanılır.

p { font-style:normal; } /* Metin normal görünür. 
p { font-style:italic; } /* Metin italik yani eğik yazı olarak görünür. */
p { font-style:oblique; } /* Metin az eğik görünür(Çok fazla desteklenmez.)*/

 

 

Line-height

Metin içindeki satırların arasındaki mesafeyi ayarlamak için kullanılır.

Örnek:

p{ line-height: 15px;} /*Satırlar arası mesafeyi 15 px yapar.*/

 

 

 

Font

Kısaltma işlemini yaparken aşağıdaki söz dizimi kullanılır:

      font: font-style font-weight font-size/line-height font-family;

Örnek:

p {
font: bold 12px/15px verdana, sans-serif;
}