Yazı tipi boyutlarını değiştirmek için Ems kullanma
Bir Web sayfası oluştururken, çoğu uzman yazı tiplerini (ve aslında her şeyi) ems, exs, yüzdelikler veya pikseller gibi göreceli bir ölçü ile boyutlandırmanızı önerir. Bunun nedeni, birisinin içeriğinizi görüntüleyebileceği tüm farklı yolları gerçekten bilmediğiniz içindir. Mutlak bir ölçü (inç, santimetre, milimetre, nokta veya resim) kullanırsanız, sayfanın farklı aygıtlarda görüntülenmesini veya okunabilirliğini etkileyebilir.
Ve W3C, boyutlar için ems kullanmanızı önerir.
Ama bir Em ne kadar büyük?
W3C'ye göre bir em:
", kullanıldığı öğenin" font-size "özelliğinin hesaplanan değerine eşittir. Özel durum, 'em', 'font-size' özelliğinin değerinde ortaya çıktığı zaman, bu durumda başvurduğu durumdur. ana öğenin yazı tipi boyutuna. "
Başka bir deyişle, ems mutlak bir boyuta sahip değildir. Boyut değerlerini bulundukları yere göre alıyorlar. Çoğu Web tasarımcıları için bu, bir Web tarayıcısında oldukları anlamına gelir, dolayısıyla 1em uzunluğundaki bir yazı tipi, söz konusu tarayıcı için varsayılan yazı tipi boyutuyla tam olarak aynı boyuttadır.
Ama varsayılan boyut ne kadar uzun? Müşterilerin varsayılan yazı tipi boyutunu tarayıcılarında değiştirebildiklerinden% 100 emin olmanın bir yolu yoktur, ancak çoğu kullanıcı, çoğu tarayıcıda 16 punto varsayılan bir yazı tipi boyutuna sahip olduğunu varsayamaz. Yani çoğu zaman 1em = 16px .
Piksel düşünün, Ölçü için Ems kullanın
Varsayılan yazı tipi boyutunun 16 piksel olduğunu öğrendikten sonra, müşterilerinizin sayfayı kolayca yeniden boyutlandırabilmesine, ancak yazı tipi boyutlarınız için pikselleri düşünmesine izin vermek için ems kullanabilirsiniz.
Bunun gibi bir boyutlandırma yapınızın olduğunu varsayalım:
- Başlık 1 - 20px
- Başlık 2 - 18px
- Başlık 3 - 16 piksel
- Ana metin - 14px
- Alt metin - 12px
- Dipnotlar - 10px
Onları ölçüm için pikselleri kullanarak bu şekilde tanımlayabilirsiniz, ancak IE 6 ve 7'yi kullanan herkes sayfanızı yeniden boyutlandıramaz. Yani boyutları emlere dönüştürmelisiniz ve bu sadece bir matematik meselesi.
- Başlık 1 - 1.25em (16 x 1.25 = 20)
- Başlık 2 - 1.125em (16 × 1.125 = 18)
- Başlık 3 - 1em (1em = 16 piksel)
- Ana metin - 0.875em (16 x 0.875 = 14)
- Alt metin - 0.75em (16 x 0.75 = 12)
- Dipnotlar - 0.625em (16 x 0.625 = 10)
Kalımı Unutma!
Ama bu ems için hepsi yok. Hatırlamanız gereken diğer şey, ebeveynin büyüklüğünü üstlenmeleridir. Bu yüzden, farklı yazı tipi boyutlarına sahip iç içe geçmiş öğeleriniz varsa, beklediğinizden çok daha küçük veya daha büyük bir yazı tipi elde edebilirsiniz.
Örneğin, böyle bir stil sayfanız olabilir:
p {font-size: 0.875em; }
.footnote {font-size: 0.625em; }
Bu, sırasıyla ana metin ve dipnotlar için 14px ve 10px olan fontlarla sonuçlanır. Ancak bir paragrafın içine bir dipnot koyarsanız, 10px yerine 8.75px olan bir metinle sonuçlanabilir. Kendiniz deneyin, yukarıdaki CSS'yi ve aşağıdaki HTML'yi bir belgeye koyun:
Bu yazı yüksekliği 14px veya 0.875 ems'dir.
Bu paragrafın içinde bir dipnot var.
Bu sadece bir dipnot paragraf olsa da.
Dipnot metninin 10px'de okunması zor, neredeyse 8,75 pikselde okunamaz.
Dolayısıyla, ems kullanırken, ana nesnelerin boyutlarından haberdar olmanız gerekir veya sayfanızdaki bazı tuhaf boyutlu öğelerle sonuçlanırsınız.