Popüler Aramalar:  TLS Nedir?  MyBB SSL Ayarları  MyBB 1.8 Linkleri Gizleme Eklentisi  Wordpress LiteSpeed Cache Ayarları  Wordpress Eklentisiz Breadcrumb  Yandex Webmaster
CSS Dersleri 10: CSS’de Font Özellikleri ve Kullanımı

CSS Dersleri 10: CSS’de Font Özellikleri ve Kullanımı

Selamlar,

Daha önce ki CSS ders yazımda CSS’in text özelliğini, yazı özelliğini anlatmıştım. Önceki dersimizde yazılara biçim vermiştik, işte üstü çizili,altı çizili gibi bir takım text özellikleri anlatmıştım. Bu yazımda ise CSS’de Font Özellikleri ve Kullanımı anlatacağım.

Daha önce ki css derslerim için buraya tıklayınız.

CSS, font özellikleri metinlerin yazı tipi,kalınlık,boyut gibi font ayarlarını yapılandırmamızı sağlayan temel css özellikleridir. Bu yazımda tek tek CSS’de Font Özellikleri ve Kullanımı anlatacağım.

CSS’de Font Özellikleri ve Kullanımı

CSS’de font özellikleri olarak 6 tane özellik bulunmaktadır. Bunlar;

  1. font-family
  2. font-size
  3. font-style
  4. font-variant
  5. font-weight
  6. font (Kısatılmış özellik)

Yukarıda ki bu özellikleri tek tek açıklayacağım ve örnekler ile de nasıl kullanıldığını göstereceğim.

Font-Family Özelliği

Yazıların tipini,şeklini ve yapısını ayarlamak için font-family özelliği kullanılmaktadır. İnternette çok çeşitli yazı fontları mevcut, farklı tarz tasarımlar,yazılar yapmak için geliştirilmiş bir CSS özelliğidir. Normalde her işletim sisteminde ve web tarayıcısında yüklü olan standart diye kabul ettiğimiz fontları kullanmak için bu özelliği kullanmayız. Daha özel bir yapı oluşturmak ya da bir yazıyı diğer yazılardan ayırt etmek için farklı font stilleri kullanırız bunun içinde CSS’in font-family özelliğinden faydalanırız.

Peki, bu özelliği nasıl kullanacağız ?

Örnek kullanım:

p {
  font-family: 'Open Sans',arial,sans-serif;
}

Yukarıda ki örneğimizde birden fazla font tipi belirttik. Neden birden fazla belirttik hemen onu anlatayım. Şimdi, daha önce söyledim her işletim sisteminde standart olarak yüklü font yapıları gelmektedir. Sizin kullandığınız işletim sisteminde eğer Open Sans adlı bir yazı tipi ailesi bulunmuyorsa eğer CSS diğer yazdığımız font ailesini arayacaktır. Yani, arial font tipi aileside yok ise en sonda ki sans-serif font ailesini arıyacaktır. Yine bulamaz ise sisteminizde default olarak tanımlanmış yazı fontlarını kullanacaktır.

Yukarıda ki örneğimizde her sistem bulunan font ailesini ekledik. Yani bu font tipleri her sistem mevcut.Burada dikkatinizi çekmesi gereken nokta, font-family özelliğine değer atarken font isim/ leri ve jenerik ismi tanımlıyor olmamızdır.

Jenerik isimleri, serif, sans-serif, monospace gibi benzer tiplere sahip font aile grubunu ifade eder.Örneğimizde sans-serif grubuna ait fontlar kullandığımızdan jenerik isimi de bu olmuştur.

[label style=”darkred”]Not: [/label] Eğer, kullandığınız font tipi ailesinin ismi birden fazla cümle içeriyorsa font tek tırnak işareti içerisinde belirtmeniz gerekiyor. Yani, örneğimizde ki Open Sans font tipi ailesi.

[label style=”darkred”]Not 2: [/label]Unutmadan, sans-serif grubuna ait fontlar bilgisayar ekranlarında serif fontlarına göre daha okunaklıdır.

Font-Size Özelliği

İsminden de anlayacağınız üzere yazıların büyüklüğünü ayarlayan CSS özelliğidir. Üç farklı şekilde değer alır bunlar; px,em ve pt adlı CSS ölçü birimleridir. CSS’de ki bu ölçü birimlerini henüz anlatmadım ama ileride bununla ilgili bir yazıda yazacağım.  Bu üç değerden en sık kullanılan px ve em değerleridir. Biz örneğimiz bu ikisini kullanacağız.

Örnek kullanım:

body {
 font-size: 16px;
}
 
h1 {
 font-size: 2em;
}

Yukarıda ki örneğimizde body adlı html elementimizin font büyüklüğüne 16px değeri verdik. Diğer h1 elementimizin font büyüklüğüne ise 2em değerini verdik. Peki, ne oldu bunları verince ? Body adlı elementimizin içerisine eklenecek her yazının boyutu 16 olacaktır.

h1, elementine verdiğimiz yazı büyüklüğü ise 32px değerinde olacaktır. Nasıl yani ? diyenleri duyar gibiyim, şöyle ki body elementine verdiğimiz 16px değerini 2’ye katlayarak h1 elementinin font-size değerine eklemektedir. Kullanım yerlerine göre, tasarımınıza göre em ya da px ya da pt kullanmak size kalmıştır. Ama tavsiyem px birimini kullanmanızdır.

Font-Style Özelliği

Bu özellik genelikle yazıları eğik (italiktik) göstermek için kullanılır.

Örnek kullanımı:

h1 {
font-style: italic;
}
h2 {
font-style: oblique;
}

Font-Variant Özelliği

Kullanıldığı yerde ki metinlere özel biçim vermek için kullanılır. Kullanıldığı yerde ki metnin küçük ya da büyük harf ile gösterilmesini belirler. İki tane değer alır, bunlar; normal ve small-caps

Örnek kullanım:

h1 {
 font-variant: small-caps;
}

See the Pen CSS’de font-variant Özelliği by Huseyin Korbalta (@huseyinkorbalta) on CodePen.

[label style=”red”]Önemli:[/label] Bu özelliğin Türkçe karakterlerde sorun çıkardığın unutmayın. Bu özelliği kullandığınız yerde Türkçe karakter olmadığından emin olun aksi takdirde tasarımınızda sorunlar yaşabilirsiniz. Türkçe karakterlerden kastım, ç,ş,i,ğ gibi harfler.

Font-Weight Özelliği

Bu özellik metnin kalınlık ve incelik durumunu belirler. En bilinen bold, semi-bold, bolder ve normal değerlerini almaktadır ancak sayısal değerlerde almaktadır.Bunlar; 100 (ince) – 900 (kalın) sayı aralığıdır.

Örnek kullanımı:

See the Pen CSS’de font-weight Özelliği by Huseyin Korbalta (@huseyinkorbalta) on CodePen.

Font Kısaltılmış Özellik

Bu özellik her CSS özelliğinde olduğu gibi Font özelliğinde de mevcuttur. Yukarıda açıkladığımız özelliklerin hepsini tek bir satırda kullanabilmemizi sağlamaktadır. Yani, yukarıda ki tüm özellikleri tek bir özellikte toplayabiliyor ve değer verebiliyoruz. Nasıl mı ?

Örnek kullanım:

/*
Söz dizimi şu şekildedir:
 
font : <font-style> <font-variant> <font-weight> <font-size> <font-family>
*/
 
p {
  font: italic small-caps bold 16px 'Open Sans',sans-serif;
}
[label style=”darkred”]Not:[/label] font kısaltılmış özelliğin değerleri tanımlanırken font-size ve font-family özelliklerini tanımlamak zorunludur.Diğer 3 özellik isteğe bağlı olarak tanımlanabilir.

Dersimizin sonuna geldik bu dersimde CSS’de Font Özellikleri ve Kullanımı anlatmaya çalıştım elimden geldiğince bir sonra ki ders yazımda görüşmek dileği ile hoşcakalın…

 Yazı Bağlantısını Kopyala & Paylaş

Benzer Yazılar

  • En Popüler 5 CSS Kütüphanesi 2019

    En Popüler 5 CSS Kütüphanesi 2019

    Web geliştiricileri olarak işimizi büyük ölçüde kolaylaştıran CSS kütüphaneleri mevcut. CSS3 teknolojisinin ortaya çıkmasıyla kazanılan kolaylıklar bu CSS kütüphanelerinin artmasını sağladı. Kütüphanelerin çeşidi ve sayısı artıkça arayüz ya da bir değiş ile ön yüz geliştiricilerin işi bir hayli kolaylaştı. Projelerinizi çok daha etkin ve kolay yönetebilmenizi, efekt verebilmenizi sağlayan bu…
  • Sık Kullanılan CSS Ölçü Birimleri

    Sık Kullanılan CSS Ölçü Birimleri

    Yaklaşık 2 hafta önce bir start-up projesinde front end developer olarak işe başladım. Bu başladığım yeni proje tamamen özel yazılmış bir yazılım olduğu için tasarım yapısını, kodlama yapısını çözmem zamanımı aldı. Bir web arayüzü geliştiricisi için CSS'de ki "px" değeri can damarıdır tasarımın. Oluşturulmuş bir yapıyı alıp, ete kemiğe büründüren…
  • CSS Dersleri 9: CSS’de Text (Metin) Özellikleri

    CSS Dersleri 9: CSS’de Text (Metin) Özellikleri

    Selamlar, Daha önce ki CSS yazımda sizlere width ve height değerlerinin kullanımını göstermiştim. Bu yazımda ise CSS'de Text (Metin) Özellikleri konusunu anlatacağım. Yazı olmadan bir website olmaz arkadaşlar, yazılar websitelerin yapı taşlarından bir tanesi ama önemli olan bir yapı taşıdır. Bu yüzden websitelerimizi hazırlerken dikkat etmemiz gereken husus text (metin)'lerdir.…
  • CSS Dersleri 8: CSS’de Yükseklik ve Genişlik Değerleri (Width – Height)

    CSS Dersleri 8: CSS’de Yükseklik ve Genişlik Değerleri (Width – Height)

    Selamlar, CSS derslerimize kaldığımız yerden devam ediyoruz. Bu dersimizde CSS'de Yükseklik ve Genişlik Değerleri ni nasıl kullanacağımızı, html elemenlerimize nasıl yükseklik ve genişlik vereceğimizi öğreneceğiz. Daha önce ki css derslerime göz atarak eksikleriniz var ise tamamlayabilirsiniz. [mks_icon icon="fa-folder-open" color="#1e73be" type="fa"] Diğer CSS Dersleri: CSS Dersleri 1: CSS Nedir ? CSS…
CSS Dersleri 10: CSS’de Font Özellikleri ve Kullanımı için Yorum'da Bulun

Bir Cevap Yaz

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

 Lütfen, en az 15 karakterli bir yorum belirtiniz.

 Lütfen,isminizi belirtiniz.
 Lütfen, kullanmakta olduğunuz bir e-mail adresi giriniz.
 Yukarıda ki alanı işaretlemeniz zorunludur.Aksi takdirde yorumunuz gönderilemeyecektir.

izmir escort