Css'nin font özelliklerini kullanarak sayfamızdaki yazıları istediğimiz gibi şekillendirebiliriz.
Css'nin font özellikleri:
KOD:color
font-family
font-style
font-variant
font-weight
font-size
font
Sırasıyla font özelliklerinin ne işe yaradıklarını örnekler eşliğinde açıklıyalım.
Color Özelliği
Adından da anlaşıldığı gibi yazıların rengini değiştirmemize yarar.
KOD:p {
color: #FF0000 /* kırmızı yazı rengi */
}
font-family Özelliği
Yazı tipi ve alternatif yazı tipini belirler.
KOD:p {
font-family: Arial
}
p {
font-family: Arial, Verdana, sans-serif
}
İkinci örnekte aralarına , (virgül) koymak suretiyle alternatif yazı tipini belirtiyoruz. Eğer kullanıcının tarayıcısı ilk belirttiğimiz yazı tipini desteklemiyorsa ikincisi, ikincisini de desteklemiyorsa üçüncü yazı tipi kullanılır. Yani yüksek öncelikten düşük önceliğe doğru sıralanırlar.
font-style Özelliği
Fontun eğik (italik) olup olmayacağını belirler. Aldığı değerler:
italic: fontu eğik yapar.
oblique: fontu eğik yapar, italic ile aynı işlevi görür.
normal: fontun normal bir şekilde yazılmasını (eğik olmamasını) sağlar.
KOD:p {
font-style: italic
}
font-variant Özelliği
Yazının boyutunu değiştirmeden küçük harf boyutunda küçültülmüş büyük harf yapar. Küçük ve büyük harfler aynı boyutta olurlar. Aldığı değerler:
nomal: yazının normal boyutta olmasını sağlar.
small-caps: yazının büyük harflerini küçük harf boyutuna indirir.
KOD:p {
font-variant: small-caps
}
font-weight Özelliği
Yazının kalınlık ve incelik değerini düzenlememizi sağlar. Aldığı değerler:
normal: yazının normal kalınlıkta olmasını sağlar.
bold: yazının kalın olmasını sağlar.
bolder: yazının normal kalınlığını bir derece arttırır.
lighter: yazının normal kalınlığını bir derece azaltır.
100-900: font-weight özelliği ayrıca sayısal parametre alır. 100 ince 900 kalındır. 100 ile 900 arasında bir değer verilebilir. Yazının varsılan değeri 400'dür.
KOD:p {
font-weight: bold
}
p {
font-weight: 600
}
font-size Özelliği
Yazının boyutunu belirlememizi sağlar. Aldığı değerler:
KOD:xx-small
x-small
small
medium
large
x-large
xx-large
Varsayılan olarak font boyutu medium'dur. Ayrıcı fontun boyutunu ana elementi esas alarak ayarlayan,
KOD:larger
smaller
değerleri vardır. Ayrıca css'de bulunan ölçü birimlerini font boyutunu ayarlamak içinde kullanabiliriz. ( px, cm, em, pt, in )
KOD:p {
font-size: 12px;
}
p {
font-size: 2cm;
}
p {
font-size: 150%;
}
p {
font-size: small;
}
font Özelliği
Font özelliklerini tek seferde uygulamamızı sağlar. Aldığı değerler:
KOD:font-style
font-variant
font-weight
font-size
line-height: Satır aralıklarını yükseklik olarak belirler.
font-family
KOD:p {
font: oblique small-caps 12px arial;
}
Kolay gelsin.
Html ( 15 )
