CSS Yazı Tipi (Font) Özellikleri

Mayıs 2019
YouTube'ta Takip Et:

Paragraflarda, başlıklarda, sayfa içerisindeki metinlerde yazı tiplerine nasıl müdahale edebileceğimiz, herhangi bir yazıya ne tür stiller atayabileceğimiz gibi font ile ilgili temel CSS özelliklerini göreceğiz bu makalede.

font family: Yazı tipinin hangi aileye ait olacağını belirliyoruz. Sistem fontları arasından bir font seçebileceğiniz gibi Google tarafından sağlanan bir hizmet olan Google Fontları’nı da kullanabiliyoruz. Sistem fontları üzerinden gidersek Arial, Verdaha ya da diğer font isimlerini yazabiliriz.

Virgül ile birden fazla sayıda font yazmamızın ve en sonunda sans-serif eklememizin anlamı şu. Siteye giren ziyaretçinin bilgisayarında Arial olup olmadığını kontrol ediyor ve Arial varsa font olarak Arial fontunu kullanıyor. Eğer yoksa devam ediyor ve Verdana’ya bakıyor. O da yoksa sans-serif fontlardan birini ekrana veriyor. Sans-serif, Times New Roman gibi çentikleri olmayan fontların kategori adı.

font-weight: Yazı tiplerinin kalınlığını belirlemek için kullanılıyor. Varsayılan değeri normaldir, ama biz bunu bold olarak değiştiririz. Böylece ilgili metin diğer metinlerden daha kalın görünecektir.

Google Font kullanıyorsak Google Font’ların birkaç farklı kalınlık değerleri bulunuyor. Bunları da sayı ile ifade ediyoruz. 100’den 900’ü kadar kalınlık değerleri bulunuyor. 100 en ince, 900 de en kalın olacak şekilde düşünebilirsiniz. Google Font kullandığınız takdirde aşağıdaki gibi bir yazım şekliyle font üzerindeki kalınlık değerini ayarlayabilirsiniz.

font-size: Yazı puntosunun büyüklüğü de font-size ile ayarlanır. Sitenin tasarımına bağlı olarak normal paragrafların boyutu 12px ile 16px arasında, başlıkların font boyutu ise daha yukarılardadır. Yazı tipi büyüklükleri piksel olarak verilebilir.

font-style: Yazıların diğer fonksiyonları ile ilgili olan özelliktir. Örneğin; italik yapmak isterseniz aşağıdaki formatta bir kod yazmalısınız.

Tüm bu font özelliklerini ayrı ayrı ifade edebildiğimiz gibi tek bir özellikte de birleştirme imkanımız var. CSS’in bu tarz güzellikleri olabiliyor. Tüm bu özellikleri aşağıdaki gibi tek satırda birleştirelim. Her birinin yerleşim yeri önemli.

Gözden kaçırdığım veya eklemek istediğiniz bir şey olursa yorum kısmına yazabilirsiniz.