Font Özellikleri Web sayfamızdaki metinlerin font ailesini, boyutunu, kalınlık ayarlarını, büyük-küçük harf olmasını ve stilini değiştirmek için kullanılır.

... konulu sunumlar: "Font Özellikleri Web sayfamızdaki metinlerin font ailesini, boyutunu, kalınlık ayarlarını, büyük-küçük harf olmasını ve stilini değiştirmek için kullanılır."— Sunum transkripti:

1 Font Özellikleri Web sayfamızdaki metinlerin font ailesini, boyutunu, kalınlık ayarlarını, büyük-küçük harf olmasını ve stilini değiştirmek için kullanılır. Bu özellikler;  font-family( Font Ailesi)  font-size (Font Boyutu)  font-weight (Font Kalınlığı)  font-style (Font Stili)  line-height (Satırlar Arası Mesafe Ayarı )  font

2 Font Ailesi “font-family” 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. Örnek1: 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.

3 Ö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.

4 Font Boyutu “font-size” Yazı karakterlerinin, dolayısıyla da metnin boyutunu ayarlamaya yarar. Boyutu piksel olarak " px ", yüzde olarak " % " ya da " em " ile belirtebileceğimiz gibi small, medium, large gibi değerler de alabilir. Ö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.

5 Font Kalınlığı “font-weight” Fontun kalınlık, incelik değerini belirlemeye yarar. 100 (ince)-900 (kalın) arasında bir değer alabildiği gibi bold, bolder, normal ve lighter değerlerini de alabilir. Örnek: p{ font-weight: bold; } Yukarıdaki örnekte p etiketi içinde yer alan yazının tamamının kalın yazılması sağlanmıştır.

6 Font Stili "font-style" Metni eğik (italik), az eğik veya normal yapmak için kullanılır. Örnek: 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.).

7 Satırlar Arası Mesafe Ayarı “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.

8 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 olarak aşağıdaki özellikler olsun; font-weight: bold; font-family: verdana, sans-serif; font-size: 12px; line-height: 15px; Kısaltma olarak kullanılan kod ise tek satır; font: bold 12px/15px verdana, sans-serif;