full screen background image
Search
Tuesday 26 September 2017
  • :
  • :

CSS Dersleri-5 Yazı Tipi (Font) Özellikleri

css dersleri yeni baslayanlar

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



avatar

Yazar; 15 yıllık web & grafik tecrübesiyle çeşitli bakanlıkların web projelerinin yanı sıra, ünlü giyim firmalarının da (crispino, formenti, MXC Sports ... v.s ) web tasarım ve yazılımları ile birlikte 1000'i aşkın referans ile, Müşteri memnuniyetine devam ediyor.


Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Magento Themes