CSS'deki font-size özelliği, yazı tipinin yüksekliğini ve boyutunu belirtmek için kullanılır. Bir öğenin metninin boyutunu etkiler. Varsayılan değeri ortadır ve her öğeye uygulanabilir. Bu özelliğin değerleri şunları içerir: xx-küçük , küçük , x-küçük , vesaire.

Sözdizimi

 font-size: medium|large|x-large|xx-large|xx-small|x-small|small|; 

Yazı tipi boyutu göreceli veya mutlak olabilir.

Mutlak boyut

Metni belirli bir boyuta ayarlamak için kullanılır. Mutlak boyut kullanıldığında metnin boyutunu tüm tarayıcılarda değiştirmek mümkün değildir. Çıktının fiziksel boyutunu bildiğimizde avantajlıdır.

npm önbelleğini temizle

Göreceli boyut

Metnin boyutunu komşu öğelere göre ayarlamak için kullanılır. Göreceli boyut ile tarayıcılardaki metnin boyutunu değiştirmek mümkündür.

NOT: Yazı tipi boyutunu tanımlamazsak paragraf gibi normal metinler için varsayılan boyut 16 pikseldir ve bu da 1 em'ye eşittir.

Piksellerle yazı tipi boyutu

Metnin boyutunu piksel cinsinden ayarladığımızda bu bize metnin boyutu üzerinde tam kontrol sağlar.

Örnek

 #first { font-size: 40px; } #second { font-size: 20px; } <p id="first">This is a paragraph having size 40px.</p> <p id="second">This is another paragraph having size 20px.</p> 

Yazı tipi boyutunda, em ile

Metni yeniden boyutlandırmak için kullanılır. Geliştiricilerin çoğu tercih ediyor içinde yerine piksel . World Wide Web Konsorsiyumu (W3C) tarafından tavsiye edilmektedir. Yukarıda belirtildiği gibi tarayıcılarda varsayılan metin boyutu 16 pikseldir. Yani varsayılan boyutu söyleyebiliriz. 1em dır-dir 16 piksel .

Java'da tasarım desenleri

Boyutu hesaplamak için formül piksel ile içinde dır-dir em = piksel/16 .

Örnek

 #first { font-size: 2.5em; /* 40px/16=2.5em */ } #second { font-size: 1.875em; /* 30px/16=1.875em */ } #third { font-size: 0.875em; /* 14px/16=0.875em */ } <p id="first">First paragraph.</p> <p id="second">Second paragraph</p> <p id="third">Third Paragraph.</p> 

Duyarlı yazı tipi boyutu

Metnin boyutunu bir kullanarak ayarlayabiliriz. vw ünitesi ' anlamına gelen ' görünüm genişliği '. Görünüm alanı, tarayıcı penceresinin boyutudur.

1vw = görünüm genişliğinin %1'i.

ubuntu'da ekran alıntısı aracı

Görünüm alanının genişliği 50 cm ise 1vw 0,5 cm'ye eşittir.

Örnek

İlk paragrafın genişliği 5vw'dir.

10vw genişliğinde ikinci paragraf.

uzunluk özelliği ile yazı tipi boyutu

Fontun uzunluğunu ayarlamak için kullanılır. Uzunluk cm, px, pt vb. cinsinden olabilir. Negatif değerler uzunluk yazı tipi boyutunda özelliğe izin verilmez.

Sözdizimi

 font-size: length; 

Örnek

 .length { color:red; font-size: 5cm; } <p class="length">A paragraph having length 5cm.</p>