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:

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.

Not:  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.

Not 2: 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:

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ı:

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:

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

Önemli: 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:

Not: 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…

Bir önceki yazım olan CSS Dersleri 9: CSS'de Text (Metin) Özellikleri başlıklı yazımda CSS'de Metin Özellikleri ve Text Özellikleri hakkında bilgiler verilmektedir.

Bir Cevap Yazın

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