Yazi Tipi (Font) Ozellikleri
Yazı Tipi (Font) ÖzellikleriYazı Tipi (Font) Özellikleri
* Yazı tipi özellikleri sayfamızdaki metinlerin yazı tipi ailesini, kalınlık ayarlarını, boyutunu, büyük-küçük harf olmasını ve stilini değiştirmemizi sağlar..
Sırasıyla Yazı Tipi Özelliklerini inceleyelim;
Renk (color)
Yazımızın rengini belirlemek için bu özelliği kullanılırız. Alabileceği değerler (İngilizce renk isimleri ve RGB değerleri /örn: #bababa, #1de gibi../) Örnek kullanımı aşağıdaki gibidir..
p {color: red}
p {color: #bababa} gibi..
p {color: #bababa} gibi..
Yazı tipi Ailesi (font-family)
Yazımızın yazı tipi ailesini belirlemek için bu özelliği kullanırız. Alabileceği değerler (Windows xp ile gelen yazı tipi ailelerinin isimleri /Özel fontların isimlerini yazsanızda sadece o font'a sahip olan kişilerde gözükecektir.. Bunun için sIFR dediğimiz bir mantık var ileriki derslerde bunu görücez inşallah. /) Örnek kullanımı aşağıdaki gibidir..
p {font-family: Arial}
p {font-family: Comic Sans MS}
p {font-family: Comic Sans MS}
Yazı tipi Boyutu (font-size)
Yazımızın boyutu ayarlamak için bu özelliği kullanırız.. Alabileceği değerler (px, pt, em gibi uzunluk değerleri.. ve % değerleri) Örnek kullanımı aşağıdaki gibidir..
p {font-size: 12px}
p {font-size: 150%}
p {font-size: 150%}
Yazı tipi Kalınlığı (font-weight)
Yazımızın kalınlığını ayarlamak için bu özelliği kullanırız.. Alabileceği değerler (bold, bolder - Sayısal değerler 100-900 arası) Örnek kullanımı aşağıdaki gibidir..
p {font-weight: bold}
p {font-weight: 900}
p {font-weight: 900}
Yazı tipi Biçimi (font-style)
Yazımızın biçimini (eğik-düz) ayarlamak için bu özelliği kullanırız.. Alabileceği değerler (italic ve oblique) Örnek kullanımı aşağıdaki gibidir..
p {font-style: italic}
p {font-style: oblique}
p {font-style: oblique}
Yazı tipi Farklılıkları (font-variant)
Yazımızın küçük ya da büyük harfle yazdırmak için bu özelliği kullanırız.. (Küçük-büyük yazdırmak için ayrıca başka bir özellik daha var.. Onuda ileriki videolarda görücez) Alabileceği değerler (normal ve small-caps) Örnek kullanımı aşağıdaki gibidir..
p {font-variant: normal}
p {font-variant: small-caps}
p {font-variant: small-caps}
Yazı tipi (font)
Yukarıda saydığımız özellikerli tek bi özellikle toplamak istersek bu özelliği kullanırız.. Sıralaması ise şu şekildedir..
font-style > font-variant > font-weight > font-size > font-family
Buna göre aşağıda bir örnek kullanımını görelim..
p {font: italic small-caps bold 12px Arial}