Ana Sayfa » Dersler » CSS » Yazılım Mutfağı Dersleri ( CSS ) Ders 4 - Font Özellikleri

Yazılım Mutfağı Dersleri ( CSS ) Ders 4 - Font Özellikleri

CSS Font Özellikleri

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.


CSS Font Aileleri

CSS de 2 farklı font aile ismi vardır:

  • Jenerik Aile İsmi (Generic Family) - font aile grubunun genel ismidir (Serif,Monospace vb)
  • Font Ailesi (font family) - font ailesinin özelleşmiş ismidir (Times New Roman,Arial vb)

Sosyal Aile Font Ailesi Açıklama
Serif Times New Roman
Georgia
Serif fontlarında bazı karakterlerin sonunda küçük bir çizgi vardır. Serif kelimesi matbaacılıkta "harfin altında ya da üstündeki ince çizgilerden biri" anlamına gelir.
Sans-serif Arial
Verdana
"Sans" kelimesi burda without(olmadan) anlamında kullanılır yani Serif ailesindeki gibi harfin altında yada üstünde küçük bir çizgi yoktur.
Monospace Courier New
Lucida Console
Tüm monospace karakterleri aynı genişliğe sahiptir.

Font Ailesi (Font Family)

Bit metne ait font ailesi font-family özelliği ile ayarlanır. font-family özelliği aynı anda birden fazla font ismini içerebilir. Bu özelliğe "fallback" yani "son çare denir". Eğer tarayıcı ilk yazılan fontu desteklemiyorsa, otomatik olarak sıradaki fontu dener. Bu özelliği kullanırken ilk olarak istediğiniz özel font seçerek başlayın ve jenerik bir font ile bitirin. Böylece tarayıcı seçtiğiniz fontları desteklemiyor ise son yazdığını jenerik fontu seçecektir.

Remark Eğer font ismi birden fazla kelimeden oluşuyor ise font ismini çift tırnak içine alın. Örneğin : "Times New Roman".

Birden fazla font ataması yaparken aşağıdaki gibi her font ismini virgülle "," ayırıyoruz.

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

CSS font-family

Bu paragraf Times New Roman fontu ile yazılmıştır.

Bu paragraf Arial fontu ile yazılmıştır.


Font Sitili (Font Style)

font-style özelliği genellikle italik yani eğik yazı yapmak için kullanılır.

Bu özellik 3 farklı değer alır:

  • normal - Metin normal görünür
  • italic - Metin italik yani eğik yazı olarak görünür
  • oblique - Metin yatık görünür (oblique italic ile benzerdir fakat daha az desteklenir)

Örnek:

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;

Bu paragraf, normal.

Bu paragraf, italic.

Bu paragraf, oblique.


Font Boyutu (Font Size)

font-size öelliği metnin boyutunu ayarlamak için kullanılır. Metnin boyutunu ayarlamak sayfamızın dizaynı için oldukça önemlidir.

Font boyutu 2 şekilde ayarlanır. Birincisi kesin boyutlar ikincisi ise göreceli boyutlar olarak adlandırılır.

Kesin Boyutlar

  • Metin için belirli bir boyut verir.
  • Kullanıcıya metin boyutunu değiştirme hakkı vermez.
  • Eğer ekran boyutu belirli ise kesin değerleri kullanmak uygundur.

Göreceli Boyutlar

  • Metin boyutu diğer elementlere göre göreceli olarak ayarlanır.
  • Kullanıcıya tarayıcı üzerinden metin boyutunu değiştirme hakkı verir.
  • Eğer bir metin boyutu ayarlamadıysanız, metin boyutu tarayıcı varsayılan değeri olan 16px olarak ayarlanır. 16px 1em ye eşittir.

Remark Bir paragrafı sanki başlık gibi veya bir başlığı sanki bir paragraf gibi göstermek için font-size özelliğini kullanmayınız. Bu tür işlemler için her zaman <h1>-<h6> ve <p> HTML etiketlerini kullanınız.


Font Büyüklüğünü Piksel Olarak Vermek

Font büyüklüğünü piksel olarak vermek, fony boyutu üzerinde tam bir kontrol sağlar.

h1 {font-size:40px;}
h2 {font-size:25px}
p {font-size:12px;}

Font Büyüklüğünü Em Olarak Vermek

Internet Explorerdaki boyutlandırma problemlerini aşmak için çoğu geliştirici font boyutu olarak piksel yerine em kullanır.

Em biriminin kullanımı W3C tarafından tavsiye edilir.

1em boyutu varsayılan font boyutudur ve 16px'e eşittir.

Remark pikselden em ye dönüşüm piksel/16=em formülü ile hesaplanabilir.

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.5625em;} /* 25px/16=1.5625em */
p {font-size:0.75em;} /* 12px/16=0.75em */

Yukarıdaki örnekde ki font boyutları bir önceki örnek ile aynıdır fakat tüm tarayıcılarda sorunsuz çalışacak olan em birimi kullanılmıştır.


Yüzde ve em birimlerinin beraber kullanılması

Aşağıdaki örnek çözüm tüm tarayıcılarda sorunsuz çalışır.

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

body seçicisinde font boyutunu 100% ayarlıyoruz böylece ilk olarak sitenin varsayılan font boyutunu ayarlamış oluyoruz. daha sonra diğer seçicilerde em kullanarak bu sabit bir font boyutu ayarlamış oluyoruz.

Artık CSS kodumuz sorunsuz olarak tüm tarayıcılarda çalışacaktır. Tüm tarayıcılarda aynı boyutlarda metinlerimiz olacaktır. Zoom ve yeniden boyutlandırma işlemleri bu sayede tüm tarayıcılar tarafından desteklenecektir.


Örnek:

Bu paragraf için font-size:250% verilmiştir.

Bu paragraf için font-size:150% verilmiştir.

Bu paragraf için font-size:100% verilmiştir.

Bu paragraf için font-size:18px verilmiştir.

Bu paragraf için font-size:1em verilmiştir.

Bu paragraf için font-size:xx-large verilmiştir.

Bu paragraf için font-size:x-small verilmiştir.

Bu paragraf için font-size:xx-small verilmiştir.


font-size özelliğinin aldığı değerler ve açıklamaları

Değer Açıklama
xx-small font boyutunu xx-small(ektra ektra küçük) olarak ayarlar.
x-small font boyutunu ekstra küçük olarak ayarlar.
small font boyutunu küçük olarak ayarlar.
medium font boyutunu ekstra medyum olarak ayarlar. Bu değer varsayılandır.
large font boyutunu büyük olarak ayarlar.
x-large font boyutunu ektra büyük olarak ayarlar.
xx-large font boyutunu xx-large (ektra ektra büyük) olarak ayarlar.
smaller font boyutunu parent elementin metin boyutundan daha küçük olarak ayarlar.
larger font boyutunu parent 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.
inherit font boyutunu parent elementin boyutunun ile aynı olacak şekilde ayarlar.

Remark Internet Explorer inherit değerini desteklemez.


Metni Kalınlığını Ayarlamak

Metnin kalınlığını ayarlamak için font-weight özelliğini kullanıyoruz.

p.normal {font-weight:normal;}
p.ince {font-weight:lighter;}
p.kalin {font-weight:bold;}
p.cok_kalin {font-weight:900;}

Bu paragraf için font-weight:normal; kullanılmıştır.

Bu paragraf için font-weight:lighter; kullanılmıştır.

Bu paragraf için font-weight:bold; kullanılmıştır.

Bu paragraf için font-weight:900; kullanılmıştır.


Fontları Büyük Küçük Harflerle Göstermek (font-variant)

font-variant özelliğine small-caps değeri verildiği zaman tüm küçük harfler büyük harf gibi gösterilir fakat küçük harflerin boyutu büyümez. Bir önceki dersimizde anlattığımız text-transform ile karıştırılmamalıdır. text-transform özelliği tüm harfleri büyük harfe çevirir ve boyutlarınıda büyük harflerle aynı yapar fakat font-variant küçük harfleri büyük harf şeklinde yazarken boyutlarını büyütmez.

font-variant:small-caps;

Örnek:

Bu yazı için font-variant özelliğine normal değeri verilmiştir..

Bu yazı için font-variant özelliğine small-caps değeri verilmiştir.

Remark font-variant özelliğine small-caps değeri vermek türkçe karakterlerde sorun çıkarabilir.


Tün font özelliklerini tek bir satırda ayarlamak (Kısa Kullanım)

Font özelliklerini tek tek değilde tek bir satırda tanımlamak istersek aşağıdaki örnekteki gibi kısa yazım özelliğini kullanabiliriz.

Bu paragraf için font değerleri font:15px arial,sans-serif; şeklinde tanımlanmıştır.

Bu paragraf için font değerleri font:15px arial,sans-serif; şeklinde tanımlanmıştır.

Kısa kullanım yapısı şu şekildedir

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

CSS Font Özellikleri ve Açıklamaları:

Özellik Açıklama Aldığı Değerler
font Tüm font özelliklerini tek bir satırda tanımlamak için kullanılır font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
inherit
font-family Metin için font ailesini belirlemek için kullanılır family-name
generic-family
inherit
font-size Metin için font boyutunu belirlemek için kullanılır xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
inherit
font-style Metin için font sitilini belirlemek için kullanılır normal
italic
oblique
inherit
font-weight Metin için font kalınlığını belirlemek için kullanılır normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
inherit
font-variant Karakterlerin normalmi yoksa büyük harflemi görüneceğini belirlemek için kullanılır. small-cap değerinde küçük harfler büyük harf olarak gösterilir fakat boyutları büyümez normal
small-caps
inherit


Yazar Hakkında

Mehmet Sabri KUNT

Google Plus
Yazilim Mutfagi kurucu ve yöneticisidir. 2005 Selçuk Ünv Bilgisayar mühendisligi mezunudur. Telekomünikasyon sektöründe BI&DWH alanindan çalismaktadir.

Makale Sayısı : 116

Yazılım Mutfağı Dersleri ( CSS ) Ders 4 - Font Özellikleri

14 yorum