Yazı tipi ölçülərini dəyişdirmək üçün Ems istifadə edin
Bir Web-səhifə qurarkən, ən çox mütəxəssislər size ems, exs, yüzdeler və ya piksellər kimi nisbətən ölçülü şriftlər (və əslində hər şey) təklif edir. Bu, həqiqətən, kimsə məzmununuzu görə bilməsi üçün bütün müxtəlif yolları bilməmisiniz. Əgər mütləq ölçü (düym, santimetr, millimetr, bal və ya pikaz) istifadə etsəniz, bu, müxtəlif cihazlarda səhifənin görünməsinə və oxunmasına təsir göstərə bilər.
Və W3C siz ölçüləri üçün ems istifadə məsləhətdir.
Amma nə qədər böyükdür?
W3C-a görə:
"istifadə edildiyi elementin 'font-size' xüsusiyyətinin hesablanmış dəyərinə bərabərdir 'em' yazı tipi ölçüsünün dəyərinin özündə olur, istisna isə, o halda aiddir ana elementin font ölçüsünə keçir. "
Başqa sözlə, ems mütləq ölçüsü yoxdur. Onlar ölçüsü əsasında onların yerlərini götürürlər. Çox Web dizaynerləri üçün bu bir veb brauzerindədirlər, buna görə də uzunluqlu bir yazı tipi həmin brauzer üçün yazı tipi ölçüsünün tam ölçüsüdür.
Amma default ölçüsü nə qədər uzun? Müştərilərin brauzerlərdə default font ölçüsünü dəyişdirə bilməsi üçün 100% müəyyən bir yol yoxdur, lakin əksəriyyəti brauzerlərin ən çox 16px ölçüsündə yazı tipi ölçüsünə malik olduğunu düşünməyəcəksiniz. Çox vaxt 1em = 16px .
Piksellərdə düşünün, Tədbir üçün Ems istifadə edin
Əvvəlki yazı tipinin ölçüsü 16px olduğunu bildikdən sonra, müştərilərinizin səhifəni asanlıqla ölçüsünə imkan verəcək, lakin font ölçüləri üçün piksel olaraq düşünməyə imkan verən ems istifadə edə bilərsiniz.
Bəs bu kimi bir ölçülü struktur var:
- Başlıq 1 - 20px
- Başlıq 2 - 18px
- Başlıq 3 - 16px
- Əsas mətn - 14px
- Alt mətn - 12px
- Dipnot - 10px
Ölçmə üçün piksellərdən istifadə edərək bunları müəyyənləşdirə bilərsiniz, lakin sonra IE 6 və 7 istifadə edən hər kəs sizin səhifənizi yaxşı şəkildə ölçə bilməyəcək. Beləliklə, siz ölçüləri ems üçün çevirmək lazımdır və bu, yalnız bir math problemidir:
- Başlıq 1 - 1.25em (16 x 1.25 = 20)
- Başlıq 2 - 1.125em (16 × 1.125 = 18)
- Başlıq 3 - 1em (1em = 16px)
- Əsas mətn - 0.875 (16 x 0.875 = 14)
- Alt mətn - 0.75em (16 x 0.75 = 12)
- Dipnot - 0.625em (16 x 0.625 = 10)
Kainatı unutma!
Amma bütün bunlar ems üçün deyil. Xatırlamaq lazım olan digər bir şey, valideynin ölçüsünü almaqdır. Belə ki, fərqli font ölçüləri olan elementləri içə qoysanız, gözlədiyinizdən daha kiçik və ya daha böyük bir font ilə başa düşə bilərsiniz.
Məsələn, belə bir stil var:
p {font-size: 0.875em; }
.footnote {font-size: 0.625em; }
Bu əsas mətn və dipnotların sırasıyla 14px və 10px olan şriftlər ilə nəticələnər. Ancaq bir paraqrafın içərisində bir dipnot qoyursanız, 10px deyil, 8.75px olan mətn ilə sona çata bilərsiniz. Özünüzü sınayın, yuxarıda göstərilən CSS və aşağıdakı HTML sənədinə qoyun:
Bu font 14px və ya boyu 0.875 ems.
Bu bənddə bir dipnot var.
Bu yalnız bir dipnot bəndidir.
Dipnot mətnində 10px-də oxumaq çətindir, 8.75px-də təxminən oxunmazdır.
Beləliklə, ems istifadə etdiyiniz zaman, ana obyektlərin ölçülərindən çox xəbərdar olmalısınız və ya səhifənizdə həqiqətən tək ölçüdə elementlər ilə sona çatacaqsınız.