Bu dersimizde CSS’de tüm font özelliklerini ele alacağız.. Fontlar için bir çok tanmlı özellik bulunmakta, bu dersimizde göreceğimiz özellikler şunlardır;
- font-family
- font-size
- font-style
- font-variant
- font-weight
- font
- @font-face
Bu dersimizde CSS’de tüm font özelliklerini ele alacağız.. Fontlar için bir çok tanmlı özellik bulunmakta, hepsine sırasıyla bir göz atalım..
1) font-family
Nesnenin yazı tipini belirlemek için kullanılır.
Değer olarak yazı tipi isimleri belirlenir.. (Örn: Arial, Tahoma, comic sans ms gibi..)
Özel fontlar bu şekilde isim belirlenerek doğrudan kullanılmaz.. Onun için ayrı bir font özelliği olan @font-face kullanılır. Bunu dersimizin sonunda sizlerle birlikte inceleyeceğiz.
/*
* h1 nesnesini seç ve
* yazı tipini Arial yap
*/
h1 {
font-family: Arial
}
– Birden Fazla Yazı Tipi Tanımlamak
Eğer birden fazla yazı tipi tanımlamak isterseniz virgül ile ayırarak yazı tipi isimlerini yazmanız yeterlidir.
/*
* h1 nesnesini seç ve
* yazı tiplerini ata
*/
h1 {
font-family: Verdana, Arial, 'Comic Sans Ms'
}
Peki böyle bir durumda hangi yazı tipi geçerli olacaktır? Böyle bir durumda önce ilk yazı tipine bakılır.. Eğer Verdana fontu var ise yazı tipi Verdana olarak belirlenir.. Ancak Verdana fontu yok ise bir sonraki font’a bakılır.. Eğer Arial fontu var ise yazı tipi Arial olarak belirlenir.. Bu şekilde bir sıralaması vardır..
Not: Eğer font ismi birden fazla kelimeden oluşuyorsa tırnak içinde de yazılabilir..
2) font-size
Yazı boyutunu belirlemek için kullanılır..
Standart olarak kullanabileceğimiz değerler şunlardır;
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
Ayrıca px, pt, em, % gibi değerlerde kullanabiliriz.. Örnek vermek gerekirse;
/*
* paragraf nesnesini seç ve
* yazı boyutunu 21px olarak ayarla
*/
p {
font-size: 21px
}
3) font-style
Her ne kadar font-style genel bir özellik ismi gibi görünsede sadece yazının eğik olup olmadığı belirlenir ????
Aldığı standart değerler şunlardır;normal
italic
oblique
Bir örnek vermek gerekirse;
/*
* paragraf nesnesini seç ve
* yazıyı eğik yap
*/
p {
font-style: oblique
}
/*
* em nesnesini seç ve
* eğik yazıyı normala dönüştür
*/
em {
font-style: normal
}
4) font-variant
Yazıları büyük harfe çevirir. Ancak ı ve i harflerini büyük I olarak çevirdiği için pek hoşunuza gitmeyebilir.. 2 değer alır ancak sadece small-caps değeri kullanılır.
/*
* paragraf nesnesini seç ve
* küçük harfleri büyük yap
*/
p {
font-variant: small-caps
}
5) font-weight
Yazı tipinin kalınlık ve incelik ayarlarını yapar..
Aldığı standart değerler şunlardır;normal
- bold
- bolder
- lighter
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
Örnek vermek gerekirse;
/*
* paragraf nesnesini içindeki spanı seç
* ve yazısını kalınlaştır
*/
p span {
font-weight: bold
}
/*
* strong nesnesini seç ve
* kalın olan yazıyı incelt.
*/
strong {
font-weight: normal
}
6) font
Tüm font özelliklerinin tek seferde kullanılmasını sağlar.. Sırasıyla şöyle kullanılmalıdır;
font-style -> font-variant -> font-weight -> font-size / line-height -> font-family
Bu özelliğin kullanılması için her zaman font-size ve font-familyözelliklerinin olması gerekir.
/*
* paragraf nesnesini seç ve
* eğik yap - harfleri büyüt - kalın yap
* boyutunu 20px yap - satır yüksekliğini 25px yap
* yazı tipini Arial yap
*/
p {
font: oblique small-caps bold 20px/25px Arial
}
7) @font-face
Özel yazı tiplerini belirlemek için kullanılır. Normal şartlarda modern tarayıcılar ttf uzantılı font dosyasını kabul ediyorlar, ancak internet explorer sorun çıkardığı için onun kabul ettiği eot uzantılı halinide dahil etmemiz gerekir..
Temel anlamda @font-face için gerekli örneğimiz şöyledir;
@font-face {
font-family: 'erbilenFont';
src: url(http://www.erbilen.net/demo/font_face/font.ttf)
}
Şimdi internet explorer sorunu için ttf uzantılı dosyamızı eot’a çevirmemiz gerekli.. Bunun için şu aracı kullanabiliriz;
http://convertfonts.com/ttf-to-eot.php
Evet, eot uzantılı font dosyamızıda dahil ettiğimizde kodlarımız şöyle olacak;
@font-face {
font-family: 'erbilenFont';
src: url(http://www.erbilen.net/demo/font_face/font.eot);
src: url(http://www.erbilen.net/demo/font_face/font.ttf)
}
Şimdi birde local tanımı var.. Bunun anlamı ise şu, sitenizi ziyaret eden kullanıcıda yükleteceğiniz font var ise yükletmeden direk kullanmasını sağlamak..
@font-face {
font-family: 'erbilenFont';
src: url(http://www.erbilen.net/demo/font_face/font.eot);
src: local('Font İsmi'),
url(http://www.erbilen.net/demo/font_face/font.woff) format('woff'),
url(http://www.erbilen.net/demo/font_face/font.svg#fontid) format('svg')
}
Evet, son olarak diğer formatlarıda yukarıdaki gibi dahil edebilirsiniz.. Ben sadece ie, firefox ve chrome’da desteklerini kontrol ettim.. Destekleri ise şu şekilde;
– svg => chrome, safari
– eot => internet explorer
– woff => firefox, chrome, safari
Tabi bu destekler tarayıcıların sürümlerine göre değişebilir, bir başka makalede okuduğumda otf tüm tarayıcılarda desteklenir diyordu ancak ben chrome ve firefox’da sadece otf ile fontu görüntüleyemedim.
Evet bu CSS dersimizin sonuna geldik, bir sonraki derste görüşmek üzere!