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.
If you enjoyed this article, please consider sharing it!
> Then try to change text size … and you’ll get the difference
Уважаемый, вы не договариваете, а сразу делаете вывод. Это как-то ненаучно 😉 Лично я сделал противоположный вывод — использование em’ов позволяет пользователям IE более гибко управлять размером шрифта. Т.к. он изменяется в больших диапазонах…
Дело в том, что чайники как правило выставляют один удобный им размер – и при запуске после рекодинга какого-нибудь (очень посещаемого) ресурса они обнаруживают, что размер КРИТИЧНО изменился, и вернуть СВОЙ привычный размер они не могут.
Собственно, речь идет о:
1. старых проектах, в которых были <font size="2 (3,4,5,-1,+1)"> etc
2. новых проектах и комплейнах от дизайнеров, которые любят
подрочитьпомучать скроллер.В реальности же получается, что при использовании em минимальный фонт становится нечитабельно мелким, а максимальный – неудобно огромным и громоздким, промежуточные – критично отличающимися (т.е. так называемая гибкость весьма условна).
Использование же % позволяет получить читабельный минимальный и не пугающий максимальный.
Я, собсно, не на пустом месте: перекоженный проект (ок. 30 млн. ИЕ6 посетителей в месяц) в первые же 24 часа получил изрядный пакет комплейнов по поводу размеров шрифтов и кивков в сторону того же wired.com, где эта проблема решена куда более вменяемо.
Просмотрев wired.com, я переделал CSS с em на % и поток комплейнов иссяк.
В общем размер не так важен, как единицы измерения… 🙂
Сложно отказывать от метода, привычного уже второй год. Охо-хо… Буду пробовать, буду думать. Вот так бы сразу 😉
От привычного всегда сложно отказываться.
Но иногда нужно 🙂
Еще, например, не помешает добавлять media=”all” в линк и – увы – на некоторых проектах – не использовать @import вообще.
Alex, я согласен с pepelsbey, и мне кажется, что если бы вы привели доводы, содержащиеся в третьем комментарии, читать на самом деле стало бы интереснее.
Третьем комментарии?
на самом деле я не очень серьезно в принципе отношусь к этому блогу, скорее, как к своей шпаргалке, и споткнувшись на таком проекте на этой маленькой проблеме не то что записал себе решение, а просто эдакую памятку.
Опять же, аргументация моя отнюдь не стопроцентно всем подходящая, Я просто довольно долго не мог понять, почему относительные единицы колбасят в таком диапазоне, а на других сайтах – в другом, но не давал себе труда изучить принципиально и тщательно те самые другие.
Так что каждый таки выбирает для себя, что ему ближе – диапазон, или мягкость 🙂
Алекс, и всё-таки ты прав частично. А всему причиной уважаемая нами Opera — при указании для неё font-size:80% шрифт становится меньше, чем в FF… Так что я пришёл к промежуточному решению: в главных стилях em’ы, а в CondComm’ах проценты.
Уже бегу писать про это с примерами…
Беги 🙂
Но возвращайся :))
Решение давно известно:
HTML {font-size: 100.1%; }
и спокойно используем em’ы и имеем одинаковый размер шрифта во всех браузерах, включая Opera.
Тоже вариант, да.
Согласен, корректный.