среда, 13 сентября 2006 г.

TextSize (font-size): EM vs %

TextSize (font-size): EM vs %

Don’t use em for font-size. Use %.

Usually 1em=100%.

Create a model:





<p style="font-size: 1em;">1 em Lorem Ipsum text</p>
<p style="font-size: 100%;">100% Lorem Ipsum text</p>


Then try to change text size (IE: View -> Text Size or Ctrl+Scroll) and you’ll get the difference.

But better just save the time and don’t use ems ;)

Disclamer: of course px is EVIL :) We don’t talk about fixed font-sizes at all.

Disclamer #2. Of course Opera and FireFox are best browsers and they change not only font-size but everything. I am talking about damn IE.

Автор: Alex Mauzon.

Интересное...



Комментарии:


pepelsbey Says:
September 13th, 2006 at 4:37 pm
> Then try to change text size … and you’ll get the difference
Уважаемый, вы не договариваете, а сразу делаете вывод. Это как-то ненаучно ;) Лично я сделал противоположный вывод — использование em’ов позволяет пользователям IE более гибко управлять размером шрифта. Т.к. он изменяется в больших диапазонах…

Alex Says:
September 13th, 2006 at 4:55 pm
Дело в том, что чайники как правило выставляют один удобный им размер - и при запуске после рекодинга какого-нибудь (очень посещаемого) ресурса они обнаруживают, что размер КРИТИЧНО изменился, и вернуть СВОЙ привычный размер они не могут.
Собственно, речь идет о:
1. старых проектах, в которых были <font size="2 (3,4,5,-1,+1)"> etc
2. новых проектах и комплейнах от дизайнеров, которые любят подрочить помучать скроллер.
В реальности же получается, что при использовании em минимальный фонт становится нечитабельно мелким, а максимальный - неудобно огромным и громоздким, промежуточные - критично отличающимися (т.е. так называемая гибкость весьма условна).
Использование же % позволяет получить читабельный минимальный и не пугающий максимальный.
Я, собсно, не на пустом месте: перекоженный проект (ок. 30 млн. ИЕ6 посетителей в месяц) в первые же 24 часа получил изрядный пакет комплейнов по поводу размеров шрифтов и кивков в сторону того же wired.com, где эта проблема решена куда более вменяемо.
Просмотрев wired.com, я переделал CSS с em на % и поток комплейнов иссяк.
В общем размер не так важен, как единицы измерения… :)

pepelsbey Says:
September 13th, 2006 at 6:37 pm
Сложно отказывать от метода, привычного уже второй год. Охо-хо… Буду пробовать, буду думать. Вот так бы сразу ;)

Alex Says:
September 13th, 2006 at 6:48 pm
От привычного всегда сложно отказываться.
Но иногда нужно :)
Еще, например, не помешает добавлять media=”all” в линк и - увы - на некоторых проектах - не использовать @import вообще.

Shimon Says:
September 13th, 2006 at 10:35 pm
Alex, я согласен с pepelsbey, и мне кажется, что если бы вы привели доводы, содержащиеся в третьем комментарии, читать на самом деле стало бы интереснее.

Alex Says:
September 13th, 2006 at 11:14 pm
Третьем комментарии?
на самом деле я не очень серьезно в принципе отношусь к этому блогу, скорее, как к своей шпаргалке, и споткнувшись на таком проекте на этой маленькой проблеме не то что записал себе решение, а просто эдакую памятку.
Опять же, аргументация моя отнюдь не стопроцентно всем подходящая, Я просто довольно долго не мог понять, почему относительные единицы колбасят в таком диапазоне, а на других сайтах - в другом, но не давал себе труда изучить принципиально и тщательно те самые другие.
Так что каждый таки выбирает для себя, что ему ближе - диапазон, или мягкость :)

pepelsbey Says:
September 29th, 2006 at 12:11 pm
Алекс, и всё-таки ты прав частично. А всему причиной уважаемая нами Opera — при указании для неё font-size:80% шрифт становится меньше, чем в FF… Так что я пришёл к промежуточному решению: в главных стилях em’ы, а в CondComm’ах проценты.
Уже бегу писать про это с примерами…

Alex Says:
September 30th, 2006 at 4:29 pm
Беги :)
Но возвращайся :) )

MT Says:
October 13th, 2006 at 9:41 pm
Решение давно известно:
HTML {font-size: 100.1%; }
и спокойно используем em’ы и имеем одинаковый размер шрифта во всех браузерах, включая Opera.

Alex Says:
October 15th, 2006 at 4:29 pm
Тоже вариант, да.
Согласен, корректный.


Другие посты по этой теме:



0 коммент.:

Отправить комментарий

Ваш комментарий появится в блоге после проверки администратором