CSS Dersleri-5 Yazı Tipi (Font) Özellikleri
Makale İçerik Başlıkları
Yazı Tipi (Font) Özellikleri
Css Font Özellikleri web sitelerimizdeki yazıların / içeriklerin, yazı tipi ailesi (font-family) özelliklerinin, kalınlık – incelik ayarları (font-weight), yazı tipinin boyutu (font-size) gibi özelliklerini belirler. başlıca aktaracağımız özellikler aşağıdaki gibidir.
- Renk (color) özelliği
- Yazı tipi ailesi (font-family)
- Yazı tipi boyutu (font-size)
- Yazı tipi kalınlığı (font-weight)
- Yazı tipi biçemi (font-style)
- Yazı tipi farklılıkları (font-variant)
- Yazı tipi (font)
Renk Özelliği (color)
CSS Renk (color) özelliği metinlerimizin renklerini belirlemek için kullanılır.
Css Örneği:
p {color:#ff0000}Bur örneğimizde <p>….</p> etiketleri içerisinde kullanılan tüm metinlerin rengi “color” özelliğinde belirtildiği gibi olacaktır.
NOT: CSS3 ile birlikte 147 farklı renk tanımı da gelmiştir ve RGBA (RGB renk tanımlaması ve Alpha tanımlaması) da kullanılmaktadır. Tüm tarayıcılar bu özelliği desteklemektedir.
Başka örneklerde vermemiz gerekirse:
.deneme p {color:#ff0022}Bu örnekte deneme class’ı tanımlanan html elemanı içindeki p etiketi kırmızı olarak tanımlanmaktadır.
bunun dışındakiler default renkleri ile yola devam edecek demek oluyor 🙂
.kırmızı .beyaz a {color:#ff0022}bu örneğimizde ise class değeri kırmızı olarak tanımlanan html elemanı içerisinde bulunan ve yine class özelliği turuncu olarak ayarlanan html öğesi içindeki a etiketinin rengi belirlenmiştir.
Yazı Tipi Ailesi (font-family)
CSS Yazı Tipi Ailesi (font-family) özelliği, html elemanının ya da nesnenin yazı tipi ailesini belirler.
İki Tür Yazı Tipi Ailesi Vardır. Bunlar:
Genel Yazı Tipi Ailesi – (“Serif” veya “Monospace” gibi) Görünümleri benzeyen font ailesi
Font İlesi (font-family özelliği) – (“Times New Roman” veya “Arial” gibi) Belirli Yazı Tipi Ailesidir.
CSS de yazı tipi ailesini tanımlamak için “font-family” özelliği kullanılır. font-family özelliğine tek bir yazı tipi yerine ikinci bir yazı tipi de aralarına virgül konularak eklenebilir. Bunun amacı ise ilk yazı tipini desteklemeyen bilgisayar ikincisini default olarak kullanabilmektedir.
NOT: Yazı tipi ailesinin adı birden fazla kelime içeriyorsa tırnak içerisinde kullanılır.
ÖRNEK:
a {font-family:"Times New Roman", Times, serif;}Bu örneğimizde virgüllerin de kullanıldığını yani yazı tipi ailesinin birden fazla olduğunu görmüş olduk.
GENEL ÖRNEK:
Aşağıdaki örneğimizde css kullanımını biraz daha pekiştirmek adına div taglarına class ismi atayıp içlerindeki etiketlere css özelliği tanımladım. Buna göre: cerceve1 class özelliğine sahip div elemanının içerisinde bulunan h1 tagına “Georgia, “Times New Roman”, serif” yazı tipi ailelerini tanımladık.
cerceve2 class özelliğini tanımladığımız div imiz içerisinde bulunan <p>…</p> ( paragraf ) etiketimize de “Verdana, Arial, Helvetica, sans-serif” yazı tipi ailelerini tanımlamış olduk. biz tüm h1 yada p etiketlerine bu özellikleri tanımlayacak olsak css dökümanımızda sadece bunlara özellik verirdik yani başında herhangi bir çevreleyici özellik (cerceve1 gibi) olmazdı.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Yazı Tipi(font) Özellikleri</title>
<style type="text/css">
.cerceve1 h1{
font-family: Georgia, "Times New Roman", serif;
}
.cerceve2 p{
font-family: Verdana, Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="cerceve1">
<h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </h1>
</div>
<div class="cerceve2">
<p>
Vestibulum felis. Maecenas pulvinar, ante convallis pellentesque
5. Yazıtipi(Font) Özellikleri 78
tristique, felis odio commodo metus, id euismod pede quam sit amet
ligula. Curabitur sit amet tellus. Suspendisse potenti.
</p>
</div>
</body>
</html>
Font Boyutu (font-size) Özelliği
Özellik atanan elemanın içersindeki metnin yazı boyutunu belirlemede kullanılır. Genelde px (pixel) olarak boyut tanımlansa da bu değerler em, % ve rems olarak boyutlar verilebilmektedir. Aşağıda bir yerlerde açıklamaya çalışacağım …
Aşağıda font-size için verilecek boyut nitelikleri mevcuttur inceleyiniz.
</pre> <pre class="brush:css line-numbers language-css"><code class=" language-css"><span class="token comment" spellcheck="true">/* <absolute-size> Mutlak Değer */</span> <span class="token property">font-size</span><span class="token punctuation">:</span> xx-small<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> x-small<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> small<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> medium<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> large<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> x-large<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> xx-large<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">/* <relative-size> Göreceli Değer*/</span> <span class="token property">font-size</span><span class="token punctuation">:</span> larger<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> smaller<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">/* <length> Sayısal Değer*/</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">12</span>px<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">0.8</span>em<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">/* <percentage> Yüzde değer*/</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">80%</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">/* Genel */</span> <span class="token property">font-size</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span></code></pre> <pre>
Yukardaki örnekleri deneyerek gözlemlemeye çalışınız ancak bu şekilde pekiştirebilirsiniz. daha fazla açıklama yapmaya gerek duymadım bu yüzden. Sorunuz olursa konu altından sorabilirsiniz.
Yazı Tipi Kalınlığı (font-weight) Özelliği
Atanan metnin yazı tipinin kalınlık incelik durumunu belirler.
aşağıdaki örnei inceleyiniz.
</pre> <pre class="brush:css line-numbers language-css"><code class=" language-css"><span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">/* EBeveyne göre değer verilir. Yani çevreleyicisinin değerine göre ince ya da kalın olur */</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> lighter<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bolder<span class="token punctuation">;</span> /*Font-Family özelliklerinde belirtilirse (bazı font aile tiplerinde sadece ince ya da kalın olabiliyor.) 100-300 arası ince sonrası kalın olarak kullanılıyor genelde*/ <span class="token property">font-weight</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> <span class="token number">400</span><span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> <span class="token number">500</span><span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> <span class="token number">600</span><span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> <span class="token number">700</span><span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> <span class="token number">800</span><span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> <span class="token number">900</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">/* Global Değerler*/</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span></code></pre> <pre>
Yazı Tipi (font) Özelliği
Tek özellik içerisinde diğer tüm özellikleri tanımlamak için kullanılır.
Aldığı Değerler Bu Şekildedir:[ <font-style> || <font-variant> || <font-weight>]? <font-size> [ / <line-height> ]? <font-family>
Aşağıdaki Örnekte daha kolay anlayacaksınız.
</pre> <pre class="brush:css line-numbers language-css"><code class=" language-css"><span class="token comment" spellcheck="true">/* Font-size | family */</span> <span class="token property">font</span><span class="token punctuation">:</span> <span class="token number">2</span>em <span class="token string">"Open Sans"</span>, sans-serif<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">/* style | size | family */</span> <span class="token property">font</span><span class="token punctuation">:</span> italic <span class="token number">2</span>em <span class="token string">"Open Sans"</span>, sans-serif<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">/* style | variant | weight | size/line-height | family */</span> <span class="token property">font</span><span class="token punctuation">:</span> italic small-caps bolder <span class="token number">16</span>px/<span class="token number">3</span> cursive<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">/* style | variant | weight | stretch | size/line-height | family */</span> <span class="token property">font</span><span class="token punctuation">:</span> italic small-caps bolder condensed <span class="token number">16</span>px/<span class="token number">3</span> cursive<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">/* The font used in system dialogs */</span> <span class="token property">font</span><span class="token punctuation">:</span> message-box<span class="token punctuation">;</span> <span class="token property">font</span><span class="token punctuation">:</span> icon<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">/* Global values */</span> <span class="token property">font</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">font</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">font</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span></code></pre> <h3>
Sonraki Dersimizde Metin (text) Özellikleri konusunu işleyeceğiz
