Коришћење емс-а за промену величине фонтова текста на веб страници

Када правите веб страницу, већина професионалаца препоручује да фонтове (и заправо све) одредите с релативном мером као што су емс, екс, проценти или пиксели. То је зато што заиста не знате све различите начине на које би неко могао да прегледа ваш садржај. А ако користите апсолутну меру (инчи, центиметри, милиметри, тачке или пике), то може утицати на приказ или читљивост странице на различитим уређајима. И В3Ц препоручује да користите емс за величине.

Али колико су велики они?

Према В3Ц ан ем:

"је једнака израчунатој вредности својства 'фонт-сизе' својства елемента на којем се користи. Изузетак је када се 'ем' појављује у вредности самог својства 'фонт-сизе', у ком случају се односи на величину фонта надређеног елемента. "

Другим речима, емс немају апсолутну величину. Они узимају своје величине величине на основу тога где се налазе. За већину веб дизајнери, то значи да су у веб прегледачу, тако да је фонт висок 1ем потпуно исте величине као задата величина фонта за тај прегледач.

instagram viewer

Али колико је висока подразумевана величина? Не постоји начин да будемо 100% сигурни, јер купци могу да промене своје подразумевана величина фонта у својим прегледачима, али пошто већина људи не може, можете претпоставити да већина прегледача има подразумевану величину фонта од 16 пиксела. Тако већину времена 1ем = 16пк.

Размишљајте у пикселима, за мерење користите емс

Једном када сазнате да је подразумевана величина фонта 16 пиксела, тада можете да користите емс да омогућите својим клијентима да лако промене величину странице, али размишљају пиксела за ваше величине слова. Рецимо да имате структуру величине отприлике овако:

  • Наслов 1 - 20 пиксела
  • Наслов 2 - 18 пиксела
  • Наслов 3 - 16 пиксела
  • Главни текст - 14 пиксела
  • Подтекст - 12 пиксела
  • Фусноте - 10 пиксела

Могли бисте их тако дефинисати користећи пикселе за мерење, али тада свако ко користи ИЕ 6 и 7 не би могао да добро промени величину ваше странице. Дакле, требали бисте претворити величине у емс, а ово је само ствар неке математике:

  • Наслов 1 - 1,25 ема (16 к 1,25 = 20)
  • Наслов 2 - 1.125ем (16 × 1.125 = 18)
  • Наслов 3 - 1ем (1ем = 16пк)
  • Главни текст - 0,875ем (16 к 0,875 = 14)
  • Подтекст - 0.75ем (16 к 0.75 = 12)
  • Фусноте - 0.625ем (16 к 0.625 = 10)

Не заборавите на наследство!

Али то није све што има емс. Друга ствар коју треба да запамтите је да они преузимају величину родитеља. Дакле, ако имате угнежђене елементе различитих величина фонта, могли бисте добити фонт који је много мањи или већи него што очекујете.

На пример, можда имате следећи стил:

То би резултирало фонтовима величине 14 пиксела и 10 пиксела за главни текст, односно фуснотама. Али ако ставите фусноту у пасус, могли бисте на крају добити текст који износи 8,75 пк, а не 10 пк. Покушајте сами, ставите горе ЦСС и следећи ХТМЛ у документ:

Дакле, када користите емс, морате бити врло свесни величине надређених објеката или ћете на крају добити неке заиста чудне елементе на вашој страници.