CSS Yazı Tipi Boyutu
Yazı Boyutu
Özellik font-sizemetnin boyutunu ayarlar.
Web tasarımında metin boyutunu yönetebilmek önemlidir. Ancak, paragrafların başlıklar gibi görünmesi veya başlıkların paragraflar gibi görünmesi için yazı tipi boyutu ayarlamalarını kullanmamalısınız.
Her zaman başlıklar için <h1> - <h6> ve paragraflar için <p> gibi uygun HTML etiketlerini kullanın.
Yazı tipi boyutu değeri, mutlak veya göreli bir boyut olabilir.
Mutlak boyut:
- Metni belirtilen bir boyuta ayarlar
- Bir kullanıcının tüm tarayıcılarda metin boyutunu değiştirmesine izin vermez (erişilebilirlik nedenleriyle kötü)
- Mutlak boyut, çıktının fiziksel boyutu bilindiğinde yararlıdır
Göreceli boyut:
- Çevredeki öğelere göre boyutu ayarlar
- Bir kullanıcının tarayıcılarda metin boyutunu değiştirmesine izin verir
Not: Bir yazı tipi boyutu belirtmezseniz, paragraflar gibi normal metin için varsayılan boyut 16 pikseldir (16 piksel=1em).
Yazı Tipi Boyutunu Piksellerle Ayarla
Metin boyutunu piksellerle ayarlamak, metin boyutu üzerinde tam kontrol sahibi olmanızı sağlar:
Örnek
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
İpucu: Piksel kullanıyorsanız, tüm sayfayı yeniden boyutlandırmak için yakınlaştırma aracını kullanmaya devam edebilirsiniz.
Yazı Tipi Boyutunu Em ile Ayarla
Kullanıcıların metni yeniden boyutlandırmasına izin vermek için (tarayıcı menüsünde), birçok geliştirici piksel yerine em kullanır.
1em, geçerli yazı tipi boyutuna eşittir. Tarayıcılarda varsayılan metin boyutu 16 pikseldir. Bu nedenle, varsayılan 1em boyutu 16 pikseldir.
Boyut, bu formül kullanılarak piksellerden em'e hesaplanabilir: piksel /16= em
Örnek
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
Yukarıdaki örnekte, em cinsinden metin boyutu, piksel cinsinden önceki örnekle aynıdır. Ancak em boyutu ile tüm tarayıcılarda metin boyutunu ayarlamak mümkündür.
Ne yazık ki, Internet Explorer'ın eski sürümlerinde hala bir sorun var. Metin büyütüldüğünde olması gerekenden daha büyük, küçültüldüğünde olması gerekenden daha küçük oluyor.
Yüzde ve Em Kombinasyonunu Kullanın
Tüm tarayıcılarda çalışan çözüm, <body> öğesi için yüzde olarak varsayılan bir yazı tipi boyutu ayarlamaktır:
Örnek
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
Kodumuz artık harika çalışıyor! Tüm tarayıcılarda aynı metin boyutunu gösterir ve tüm tarayıcıların metni yakınlaştırmasına veya yeniden boyutlandırmasına izin verir!
Duyarlı Yazı Tipi Boyutu
vwMetin boyutu , "görünüm alanı genişliği" anlamına gelen bir birim ile ayarlanabilir .
Bu şekilde metin boyutu tarayıcı penceresinin boyutunu takip edecektir:
Selam Dünya
Yazı tipi boyutunun nasıl ölçeklendiğini görmek için tarayıcı penceresini yeniden boyutlandırın.
Örnek
<h1 style="font-size:10vw">Hello World</h1>
Görünüm alanı, tarayıcı penceresi boyutudur. 1vw = görünüm alanı genişliğinin %1'i. Görünüm alanı 50cm genişliğindeyse, 1vw 0,5cm'dir.