HTML TEMELLERİ
HTML5
İLERİ SEVİYE
CSS TEMELİ
css fonts
css fonts list
css fonts family
css fonts styles
css fonts to use
css fonts examples
css a font family
css a font style
css fonts code
css font değiştirme
css font ekleme
css font kullanımı
css font family kullanımı
css font family türkçe
css font family ekleme
css yazı stili değiştirme
css yazı tipi
css yazı tipi ekleme
css font style list
css font style align
css text boyutu
css yazı boyutu ayarlama
css font size kullanımı
css font sizes
css font size auto
css yazı satır aralığı
css yazı kalınlığı
css font weights
css font weight normal
css font weight options
css yazı tipi örnekleri
css yazı tipi kodları
css font variant nedir
font variant in css
css style for font-variant

CSS Fonts(Yazı)

CSS Fonts(Yazı)

Web sitenizdeki tüm yazıların pek çok özelliğini değiştirebilirsiniz. Bu özelliklerden bazıları yazının tipi, stili, büyüklüğü ve genişliğidir. Bu bölümde hepsini teker teker inceleyeceğiz.

1-Font Family(Font Ailesi-Seçimi)

Yazınızın yazı tiplerini belirlemek için önceden hazırlanmış yazı tipleri kütüphanesinden seçebilirsiniz. Bu özellik tek bir değer almayabilir yani bir yazı tipi seçmelisiniz tabii ki ama kullandığınız tarayıcı seçtiğiniz yazı tipini bilemez ise varsayılan yazı tipini kullanacaktır. Bu nedenle alternatif yazı tipleri yazmalısınız. Bu olmaz ise bu şeklinde genelde üç taneye kadar alternatif sunulur ve tarayıcı birinciden başlayarak anlayıp kullanmaya çalışır. Hangisini anlarsa onu uygular ve bitirir. Genelde birinci tercihiniz uygulanır içiniz rahat olsun :)

Kullanımı:

Css
p.timesnewroman {
font-family: "Times New Roman", Times, serif;
}
p.arial {
font-family: Arial, Helvetica, sans-serif;
}
Html
<h1>CSS font-family</h1>
<p class="timesnewroman">Bu bir paragraftır ve Times New Roman font özelliği ile yazılmıştır.</p>
<p class="arial">Bu bir paragraftır ve Arial font özelliği ile yazılmıştır.</p>

2-Font Style(Yazı Stili)

Yazı stillerini belirlemek için kullanılır. Yazınızı normal, italik ve eğik bir şekilde yazmanızı sağlar.

Kullanımı:

Css
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
Html
<p class="normal">Bu paragraf normal stili ile yazılmıştır.</p>
<p class="italic">Bu paragraf italic stili ile yazılmıştır.</p>
<p class="oblique">Bu paragraf oblique(eğik) stili ile yazılmıştır.</p>

3-Font Size(Yazı Boyutu)

Yazı boyutunu belirlemek için kullanılır. Çeşitli birimleri vardır. Aşağıdaki örnekte bazı birimleri ele aldık.

Kullanımı:

Css
h1.hbirinci {
font-size: 2.5em; /* 16x2.5=40px */
}
h2.hikinci {
font-size: 1.875em; /* 16x1.875=30px */
}
p.pbirinci {
font-size: 14px;
}
Html
<h1 class="hbirinci">Bu Birinci Başlıktır</h1>
<h2 class="hikinci">Bu İkinci Başlıktır</h2>
<p class="pbirinci">Bu bir paragraftır</p>

4-Font Weight(Yazı Ağırlığı/Genişliği)

Türkçesi aslında; yazınızı ne kadar kalınlıkta yazacağınızı belirler.Çeşitli değerler alır.

Kullanımı:

Css
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
Html
<p class="normal">Bu bir paragraftır</p>
<p class="light">Bu bir paragraftır.</p>
<p class="thick">Bu bir paragraftır.</p>
<p class="thicker">Bu bir paragraftır.</p>

5-Font Variant(Yazı Biçimi)

Yazınızın biçimini değiştirir. Bunu en iyi örnekle anlarsınız.

Kullanımı:

Css
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
Html
<p class="normal">Bu paragraf normal yazı tipindedir</p>
<p class="small">Bu paragraf small-caps yazı tipindedir.</p>


Paylaş:

Enes KILIÇ
Webmaster