Yazilim Mutfagi Dersleri ( CSS ) Ders 4 – Font Özellikleri

CSS Font Özellikleri

Font özellikleri web sayfamizdaki metinlerin font ailesini, boyutunu, kalinlik ayarlarini, büyük-küçük harf olmasını ve stilini değistirmek için kullanılır.

CSS Font Aileleri

CSS de 2 farkli font aile ismi vardir:

  • Jenerik Aile Ismi (Generic Family) – font aile grubunun genel ismidir (Serif,Monospace vb)
  • Font Ailesi (font family) – font ailesinin özellesmis ismidir (Times New Roman,Arial vb)
Sosyal AileFont AilesiAçiklama
SerifTimes New Roman
Georgia
Serif fontlarinda bazi karakterlerin sonunda küçük bir çizgi vardir. Serif kelimesi
matbaacilikta “harfin altinda ya da üstündeki ince çizgilerden biri” anlamina gelir.
Sans-serifArial
Verdana
“Sans” kelimesi burda without(olmadan) anlaminda kullanilir yani Serif
ailesindeki gibi harfin altinda yada üstünde küçük bir çizgi yoktur.
MonospaceCourier New
Lucida Console
Tüm monospace karakterleri ayni genislige sahiptir.

Font Ailesi (Font Family)

Bir metne ait font ailesi font-family özelligi ile ayarlanir. font-family özelligi ayni anda birden fazla font ismini içerebilir. Bu özellige “fallback” yani “son çare denir”. Eger tarayici ilk yazilan fontu desteklemiyorsa, otomatik olarak siradaki fontu dener. Bu özelligi kullanirken ilk olarak istediginiz özel font seçerek baslayin ve jenerik bir font ile bitirin. Böylece tarayici seçtiginiz fontlari desteklemiyor ise son yazdigini jenerik fontu seçecektir.

Eger font ismi birden fazla kelimeden olusuyor ise font ismini çift tirnak içine alin. Örnegin : “Times New Roman”.

Birden fazla font atamasi yaparken asağidaki gibi her font ismini virgülle “,” ayiriyoruz.

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 özelligi genellikle italik yani egik yazi yapmak için kullanilir.

Bu özellik 3 farkli deger alir:

  • normal – Metin normal görünür
  • italic – Metin italik yani egik yazi olarak görünür
  • oblique – Metin yatik 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 öelligi metnin boyutunu ayarlamak için kullanılır. Metnin boyutunu ayarlamak sayfamızın dizaynı için oldukça önemlidir.

Font boyutu 2 sekilde ayarlanir. Birincisi kesin boyutlar ikincisi ise göreceli boyutlar olarak adlandirilir.

Kesin Boyutlar

  • Metin için belirli bir boyut verir.
  • Kullaniciya metin boyutunu degistirme hakki vermez.
  • Eger ekran boyutu belirli ise kesin degerleri kullanmak uygundur.

Göreceli Boyutlar

  • Metin boyutu diger elementlere göre göreceli olarak ayarlanir.
  • Kullaniciya tarayici üzerinden metin boyutunu degistirme hakki verir.
  • Eger bir metin boyutu ayarlamadiysaniz, metin boyutu tarayici varsayilan degeri olan 16px olarak ayarlanir. 16px 1em ye esittir.

Bir paragrafi sanki başlık gibi veya bir başlığı sanki bir paragraf gibi göstermek için font-size özelligini kullanmayiniz. Bu tür islemler için her zaman <h1>-<h6> ve <p> HTML etiketlerini kullaniniz.

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

Font büyüklügünü piksel olarak vermek, fony boyutu üzerinde tam bir kontrol saglar.

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

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

Internet Explorerdaki boyutlandirma problemlerini asmak için çogu gelistirici font boyutu olarak piksel yerine em kullanir.

Em biriminin kullanimi W3C tarafindan tavsiye edilir.

1em boyutu varsayilan font boyutudur ve 16px’e esittir.

pikselden em ye dönüsü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 */

Yukaridaki örnekde ki font boyutlari bir önceki örnek ile aynidir fakat tüm tarayicilarda sorunsuz çalisacak olan em birimi kullanilmistir.

Yüzde ve em birimlerinin beraber kullanilmasi

Asagidaki örnek çözüm tüm tarayicilarda sorunsuz çalisir.

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% ayarliyoruz böylece ilk olarak sitenin varsayilan font boyutunu ayarlamis oluyoruz. daha sonra diger seçicilerde em kullanarak bu sabit bir font boyutu ayarlamış oluyoruz.

Artik CSS kodumuz sorunsuz olarak tüm tarayicilarda çalisacaktir. Tüm tarayicilarda ayni boyutlarda metinlerimiz olacaktir. Zoom ve yeniden boyutlandirma islemleri bu sayede tüm tarayicilar tarafindan 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:18% 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 özelliginin aldigi degerler ve açiklamalari

DegerAçiklama
xx-smallfont boyutunu xx-small(ektra ektra küçük) olarak ayarlar.
x-smallfont boyutunu ekstra küçük olarak ayarlar.
smallfont boyutunu küçük olarak ayarlar.
mediumfont boyutunu ekstra medyum olarak ayarlar. Bu deger varsayilandir.
largefont boyutunu büyük olarak ayarlar.
x-largefont boyutunu ektra büyük olarak ayarlar.
xx-largefont boyutunu xx-large (ektra ektra büyük) olarak ayarlar.
smallerfont boyutunu parent elementin metin boyutundan daha küçük olarak ayarlar.
largerfont boyutunu parent elementin metin boyutundan daha büyük olarak ayarlar.
lengthfont boyutunu px,cm gibi sabit bir boyutta ayarlar.
%font boyutunu parent elementin boyutunun yüzdesi olarak ayarlar.
inheritfont boyutunu parent elementin boyutunun ile ayni olacak sekilde ayarlar.

Internet Explorer inherit degerini desteklemez.


Metni Kalinligini Ayarlamak

Metnin kalinligini ayarlamak için font-weight özelligini kullaniyoruz.

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; kullanilmistir.

Bu paragraf için font-weight:lighter; kullanilmistir.

Bu paragraf için font-weight:bold; kullanilmistir.

Bu paragraf için font-weight:900; kullanilmistir.

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

font-variant özelligine small-caps degeri verildigi zaman tüm küçük harfler büyük harf gibi gösterilir fakat küçük harflerin boyutu büyümez. Bir önceki dersimizde anlattigimiz text-transform ile karistirilmamalidir. text-transform özelligi tüm harfleri büyük harfe çevirir ve boyutlarinida büyük harflerle ayni yapar fakat font-variant küçük harfleri büyük harf seklinde yazarken boyutlarini büyütmez.

font-variant:small-caps;

Bu paragraf için font-variant:normal; kullanilmistir.

Bu paragraf için font-:small-caps; kullanilmistir.

Örnek:

font-variant özelligine small-caps degeri vermek türkçe karakterlerde sorun çikarabilir.

Tüm font özelliklerini tek bir satirda ayarlamak (Kisa Kullanim)

Font özelliklerini tek tek degilde tek bir satirda tanimlamak istersek asağidaki gibi kullanabiliriz.

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

CSS Font Özellikleri ve Açiklamalari:

ÖzellikAçiklamaAldigi Degerler
fontTüm font özelliklerini tek bir satirda tanimlamak için kullanilirfont-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
inherit
font-familyMetin için font ailesini belirlemek için kullanilirfamily-name
generic-family
inherit
font-sizeMetin için font boyutunu belirlemek için kullanilirxx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
inherit
font-styleMetin için font sitilini belirlemek için kullanilirnormal
italic
oblique
inherit
font-weightMetin için font kalinligini belirlemek için kullanilirnormal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
inherit
font-variantKarakterlerin normalmi yoksa büyük harflemi görünecegini belirlemek için kullanilir. small-cap degerinde küçük harfler büyük harf olarak gösterilir fakat boyutlari büyümeznormal
small-caps
inherit

Tags:

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir