CSS Font Özellikleri Nedir? Nasıl Kullanılır?

Tarih | 4 Haziran 2018

Herkese Merhaba. Bu yazımızda “CSS Font Özellikleri Nedir? Nasıl Kullanılır?” Sorularına kısaca cevap vermeye çalışacağız.

font-family, kullanılan yazının türünü belirleyen bir özelliktir. Örneğin; Arial, Times New Roman, Verdana, Calibri gibi. Buradan veya alternatif platformlardan farklı fontlara bakabilirsiniz. Aşağıdaki gibi herhangi bir font ailesinden biri veya birden fazlası kullanılabilir.

font-family: Arial;
font-family: Helvetica;
font-family: Arial, Helvetica, sans-serif;

font-style, kullanılan yazının normal veya sağa eğik olmasını sağlar. Bunun için normal, italic ve oblique kodları kullanılır. italic, italic özelliği bulunan fontlara; oblique, italic özelliği bulunmayan fontlara uygulanır. Ancak günümüzde sıklıkla italic kullanıldığını hatırlatalım.

font-style: normal; (yazının normal hali için)
font-style: italic; (yazının sağa eğik hali için)
font-style: oblique; (yazının sağa eğik hali için)

font-size, kullanılan yazının büyüklüğünü veya küçüklüğünü belirler. Farklı şekillerde kullanımı mevcuttur. Burada desteklediği font büyüklüğü/küçüklüğüne kadar px rakamsal olarak kullanılabilir. large ise alternatif olarak xx-small, x-small, small, medium, large, x-large, xx-large şeklinde kullanılabilir. Örneğin;

font-size: 15px;
font-size: large;
font-size: 150%;
font-size:2em;

font-variant: Yazının normal veya tümünün büyük harflerden oluşmuş olmasını sağlar. Aşağıdaki gibi kullanımları mevcuttur. Ancak çok kullanılan bir özellik olmadığını söyleyebilirim. Burada ki büyüklük küçüklük olayı tamamen tasarımsal bir konu. Yazının büyük, küçük veya ilk harflerinin büyük olması için burada bulunan linkte gösterdiğim (text-transform) kodları kullanılır.

font-variant: small-caps;
font-variant: normal;
font-variant: all-small-caps;

font-weight: Yazının kalınlık-inceliğini belirler. Önem arz eden veya farklı durumlarda sıklıkla kullanılır. Değişik kullanımları mevcuttur.

font-weight: normal; (yazının standart normal kullanımı için)
font-weight: lighter; (yazının standart ince kullanımı için)
font-weight: bold; (yazının standart kalın kullanımı için)
font-weight: bolder; (yazının standart kalın kullanımı için)
font-weight: 900; (yazının kalınlık/incelik derecesinin kullanımı için)

font-size: Yazının büyüklüğünü belirler. Herhangi bir yazının ne kadar büyük veya küçük olması isteniyorsa ona göre istenen değer girilir. Sıklıkla px şeklinde rakamsal değer kullanılır. Ancak farklı kullanımları da bulunmaktadır. Large kullanımına alternatif medium, xx-small, x-small, small, large, x-large, xx-large, smalle, larger kullanılabilir.

font-size: 15px;
font-size: large;
font-size: 150%;

font-kerning, pek kullanılmasa bazen tasarım olarak kullanmamız gerekebilir. Kullanımın oldukça şık bir görsel font kullanımını sağladığını söylemek mümkün. font-kerning yazı karakterlerini değiştirmeden karakter aralığını uzatır. Örneğin;

font-kerning: normal;
font-kerning: none;
font-kerning: auto;

font-stretch yazıyı uzatmak için kullanılır. Ancak diğer font kullanımlarında olduğu gibi tarayıcınızın destekleyip desteklemediğini öğrenmeniz gerekiyor. ultra-condensed, extra-condense, condense, semi-condense, norma, semi-expande, expande, extra-expande, ultra-expanded kullanımları mevcuttur.