Css Font Özellikleri
16 Nisan 2008. Yazar: blackinci
Css de font özellikleri web sayfamızın en önemli yeridir hangi fontu kullanacağımızı boyutu özelliği ve stili olmak üzere çeşitli bir çok özelliği bulunuyor. Bunlar nelerdir bir görelim:
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
@font-face
font-family:
font-family sitemizin yada herhangibi bir elementin hangi fontu kullanacağını belirler ama bu font kullanımının bazı şartları vardır bunlar nelerdir nasıl kullanılır.
family-ismi bizim belirlediğimiz yazı tipidir
generic-family bizim belirlediğimiz yazı tipinin ailesidir
örnek:
p{font-family: arial, sans-serif;}
Burada Dikkat etmemiz gereken font ailesi ismi en sona yazılmalıdır ve her tekrar eden font isminin sonuna (,) virgül koyulmalıdır
generic-family font ailesinin isimleri şöyledir
'serif'
'sans-serif'
'cursive'
'fantasy'
'monospace'
generic-family font tipinin son ayağıdır nedeni ise bizim belirlediğimiz fontlar yazılan karakteri desteklemiyorsa bir sonrakine atlar oda desteklemez ise son çare olarak generic-family yani soysal font gösterilir
Not: generic-family soysal yazı tipi ailesi tırnak içerisinde yazılmaz
font-family de tırnak kullanımı
örnek:
p{font-family: arial, "lucida console", sans-serif;}
üstteki kodda dikkat ederseniz "lucida console" fontunu tırnakla belirttik bunun nedeni font isminin boşluklu olması yani font isminde boşluk içeren isimler tırnak içerisinde yazılır.
Aynı şey kod içerisinde css kullanımda da geçerlidir fakat çift (") tırnak yerine tek tırnak kullanılır (')
örnek:
<p style="font-family: arial, 'lucida console', sans-serif">
Ön İzleme Örnek
font-size:
font-size font büyüklüğünü küçüklüğünü belirlememize sağlar Temel Komutlar Kullanabilir yada numara ile boyut verebiliriz örnek kullanım
body { font-size: x-large;}
Temel Yazım değerleri
xx-small => html boyutu 1
x-small
small => html boyutu 2
medium => html boyutu 3
large => html boyutu 4
x-large => html boyutu 5
xx-large => html boyutu 6
Numara olarak font boyutu vermek için px, pt, cm, mm, em, ex, pc, inc ve % kullanılabilir örnek
p {font-size: 260%}
p {font-size: 14px}
p {font-size: 2.6em}
p {font-size: 14px}
p {font-size: 2.6em}
Göreceli değerler
smaller => göreceli en küçük değer
larger => göreceli en büyük değer
length => göreceli normal değer
Ön İzleme Örnek
font-size-adjust:
font-size-adjust Özelliği çok fazla kullanılmasada aslında güzel bir özelliktir çok fazla kullanılmamasının başlıca sebebi İE6 Ve İE7 Bu özelliği desteklemiyor ne yazıkki. Bu özellikl font-size ile verlmiş Değeri Daha Okunaklı Olarak Gösterir Örnek Olrak "times Roman" fontu küçültüldüğünde "verdana" fontuna nazaran daha okunaksız bir hal alır ont-size-adjust özelliği yazıtipi kapsam oranının bir katsayı ile çarparak düzeltmesini sağlar örnek kullanım
h1 {font-size-adjust: 0.3;}
Ön İzleme Örnek
font-stretch:
font-stretch malesef Tarayıcılar tarafından deteklenmeyen bir özellik olduğu için anlatmadan geçiyorum ( Tarayıcılar Desteklendiği an güncellenecek)
font-style:
font-style fontumuzun yatık, eğik olarak belirlememizi sağlar örnek
normal => normal görünüm
italic => italic görünüm
oblique => eğik görünüm
kullanımı alttaki şekildedir
h1 {font-style: italic}
h2 {font-style: normal}
h3 {font-style: oblique}
h2 {font-style: normal}
h3 {font-style: oblique}
Ön İzleme Örnek
font-variant:
font-variant özelliği küçük harfleri büyük gösterir ama büyük harflerden daha büyük değillerdir örnek kullanım
p {font-variant: small-caps}
Ön İzleme Örnek
font-weight:
Bu Özellik Yazı Tipi nin Tonunu belirler yada koyuluk derecesini diyebiliriz
Göreceleri Değerler
normal => sayısal değeri 400
bold => sayısal değeri 700
bolder => sayısal değeri 900
lighter => sayısal değeri 100
Sayısal değerler 100 den 900 e kadardır ve ve her değer bir diğerinden bir ton koyudur
100
200
300
400
500
600
700
800
900
Göreceli ve sayısal değerlerin Kullanımı
p {font-weight: normal}
p {font-weight: bold}
p {font-weight: 900}
p {font-weight: bold}
p {font-weight: 900}
Ön İzleme Örnek
@font-face:
Font-face şuan kullanılmasa da anlatmakta yarar var Font face ile sitemize özel font ekleyebiliriz yanlız şuanda bildiğim kadarıyla hiç bir tarayıcı desteklemiyor fakat yinede bir gün tarayıcılar desteklemesini ümit ediyoruz öncelikle Fontumuzu Sitemizin FTP adresine yüklememiz gerekiyor Yüklemiş olduğumuzu varsayarsak örnek kodlarımıza geçelim
Fontu Çağırma Örnek
@font-face {
font-family: "Bana Ozel"; /* Fontumun İsmini Belirliyoruz */
src: url("fonts/ozel.ttf"); /* Fontun Yolunu Yazıyoruz*/
}
font-family: "Bana Ozel"; /* Fontumun İsmini Belirliyoruz */
src: url("fonts/ozel.ttf"); /* Fontun Yolunu Yazıyoruz*/
}
üstteki kodda fontumuzu çağırdık bir elementte kullanmak istediğimizde sadece fontun ismini yazmamız ve font ailesinin ismini vermemmiz yeterli olacaktır örnek
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Font test</TITLE>
<STYLE TYPE="text/css" MEDIA="screen, print">
@font-face {
font-family: "Bana Ozel";
src: url("font/ozel.ttf")
}
H1 { font-family: "Bana Ozel ", serif }
</STYLE>
</HEAD>
<BODY>
<H1>Bana Özel Fontum </H1>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Font test</TITLE>
<STYLE TYPE="text/css" MEDIA="screen, print">
@font-face {
font-family: "Bana Ozel";
src: url("font/ozel.ttf")
}
H1 { font-family: "Bana Ozel ", serif }
</STYLE>
</HEAD>
<BODY>
<H1>Bana Özel Fontum </H1>
</BODY>
</HTML>
Örnek Kullanımı Bu Şekildedir fakat henüz tarayıcılar tarafından desteklenmemektedir.
Font Uzantıları birden fazladır eklemek istediğimiz fontlarda uzantı girmemiz gerekmez örnek
@font-face {
font-family: "Bana Ozel"; /* Fontumun İsmini Belirliyoruz */
src: url("fonts/ozel"); format("opentype") /* Fontun Yolunu yazıyoruz Ve Formatını Belirliyoruz */
}
font-family: "Bana Ozel"; /* Fontumun İsmini Belirliyoruz */
src: url("fonts/ozel"); format("opentype") /* Fontun Yolunu yazıyoruz Ve Formatını Belirliyoruz */
}
Font formatları şu şekildedir
"truedoc-pfr" TrueDoc™ Portable Font Resource .pfr
"embedded-opentype" Embedded OpenType .eot
"type-1" PostScript™ Type 1 .pfb, .pfa
"truetype" TrueType .ttf
"opentype" OpenType, TrueType Open dahil .ttf
"truetype-gx" GX eklentili TrueType
"speedo" Speedo
"intellifont" Intellifont