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> Şimdi Test Edin 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> Şimdi Test Edin 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.
Şimdi Test Edinuzunluk ö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> Şimdi Test Edin