шрифты в css Как создать свой сайт > Вебмастеру > Создание своего сайта > Масштабные тонкости

Масштабные тонкости

Это не наблюдение самого света, а фиксация того факта, что свет когда-то был.
«iPhuk 10», Виктор Пелевин.
8 октября 2006

    Сегодня уже почти никто из коллег не спорит с тем, что размер шрифта на сайте должен выбирать пользователь, а не дизайнер. Восклицания «зафиксируйте мне эту штучку, а то у меня дизайн разваливается» привычно парируются фразой «а не дизайн и был, если в нём не предусмотрено масштабирование».


    И неважно, как пользователь будет увеличивать шрифт: в рамках ли пяти ступеней, как в Internet Explorer 6-й и более младших версий, безо всяких разумных ограничений, как в Firefox или наиболее человечно, как в Opera или IE 7. Важно то, чтобы, при задании относительных единиц измерения, шрифт при настройках по умолчанию выглядел единообразно, а изменение шрифта +/- две ступени имело бы рациональный смысл: несколько увеличить/уменьшить шрифт для удобства чтения, что проходило бы безболезненно для макета.

CSS 2.1 предлагает нам два типа относительных единиц измерения для шрифтов, более-менее стабильно поддерживаемых браузерами: проценты (%) и em’ы (em-size). При указании базового размера шрифта, эти единицы измерения принято считать тождественными.

    Давайте проверим:

BODY {padding:20px;font-family:Arial,sans-serif;}
.percent {font-size:80%;}
.em-size {font-size:0.8em;}

<p class="percent">Комнату работали остальных на миф, он назад отдавали кто.</p>
<p class="em-size">Комнату работали остальных на миф, он назад отдавали кто.</p>

    Первый параграф в нашем примере будет измеряться в процентах, второй в em’ах.

    Смотрим результат в IE 5/6/7 — отлично. Firefox — чудесно. Opera?!

Как выглядит шрифт в Опере

    Получается, что для Opera проценты и em’ы, при указании базового размера шрифта, не являются эквивалентыми единицами. Не берусь утверждать, чьё поведение в данной ситуации правильнее, но факт остаётся фактом. Получается, что размер шрифта безопаснее всего указывать в em’ах — тогда Opera будет показывать нам те же размеры, что и Firefox с IE.

    Первое условие мы выполнили — шрифт выглядит одинаково во всех браузерах. Идём дальше, пробуем его масштабировать там, где это вообще имеет смысл — в Firefox, IE 5/6 и, на всякий случай, в IE 7 при помощи встроенного механизма пятиступенчатого изменения размера шрифта, который остался, не смотря на появление Page Zoom’а.

    Делаем Ctrl+Scroll для IE 5/6, View > Text Size > для IE 7 (чтобы не задействовать Page Zoom), Ctrl+Plus/Minus в Firefox (Ctrl+Scroll шагает в нём слишком мелкими шажками)… и получаем:

[-2] [-1] [0] [+1] [+2] — IE
[-2] [-1] [0] [+1] [+2] — Firefox

    Firefox, в общем-то, радует — в нём всё стабильно. Кроме того, что изменение размеров ограничено только терпением пользователя. И найдётся ведь заказчик, который возмутится, крутанув ступеней на двадцать вверх. Благо, что Firefox не сохраняет, подобно IE, эти настройки между сессиями.

    А вот IE зачем-то применяет для разных единиц измерения различные ступени масштабирования. Если сравнивать эти ступени с поведением Firefox и работой Text Zoom в IE 7

Работа Text Zoom в IE 7

, то ближе всего к ним строчка, размер шрифта для которой указан в процентах. Помимо всего, у строки в em’ах гораздо больше шансов развалить ваш макет.

    Вырисовывается такая картина: Firefox’у, в общем-то, всё равно, для Opera нам нужны em’ы, для IE проценты.

    Решаем всё традиционно — мухи в одну сторону, котлеты в другую. Точнее — одни стили для Firefox и Opera, а другие для IE. Conditional Comments нам в помощь:

<link … href="style.css" />
<!--[if IE]>
   <link … href="ie.css" />
<![endif]-->

style.css:
BODY {
   font-size:0.8em;
   }
ie.css:
BODY {
   font-size:80%;
   }

ps: отдельное спасибо Алексу за его бескомпромиссное заявление ;)

upd: публикации на тему

Автор: pepelsbey.

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

Flack 9 October 2006 at 13:32
.em-size {
font-size:0.85em;
}
Иногда спасает.

uggallery 9 October 2006 at 13:57
К BODY добавляем font-size: 100%, и далее используем любые единицы какие хотим :)
Применять условные комментарии на киждый чих тоже не хочется.

pepelsbey 9 October 2006 at 14:20
Уже не припомню макета, в котором не пришлось бы применять IE-хаки, значит CondComm есть в любом случае. Так почему бы не воспользоваться?
Рецепт в конце — для полезности, а так — это скорее было исследование вопроса.

uggallery 9 October 2006 at 14:35
Все равно стараюсь минимизировать код, подключаемый через “комменты”. Тем более, что мое решение вроде работает.
Исследования это всегда полезно :)

pepelsbey 9 October 2006 at 14:55
> стараюсь минимизировать код, подключаемый через “комменты”
Вот это новость :) А я наоборот стараюсь максимально вынести хаки наружу, чтобы нормальные браузеры не грузили всю эту чушь…
Решение работает, но я привык раз и навсегда разбираться со шрифтовыми свойствами на уровне BODY.

uggallery 9 October 2006 at 16:48
Разве же это хак? Простое свойство. Оно только для IE, конечно, но другим не мешает и мешать не может. Ради одного его городить новый файл я бы не стал. Другое дело, если есть другие свойства IE-only. Тогда почему бы и не вынести.
Не понял немножко про “уровень BODY”.

uggallery 9 October 2006 at 16:53
>Не понял немножко про “уровень BODY”.
Отбой тревоги. Разобрался.

pepelsbey 9 October 2006 at 16:55
Хак для меня — это любое экстра-правило, необходимое для конкретного браузера. Ну раз оно ему необходимо, пусть только он его и получит ;)
> другим не мешает и мешать не может
А ведь часто бывает, что какой-то хак лечит один браузер, но калечит другой…
«Уровень BODY» — это я неудачно выразился, имея в виду селектор BODY в самом начале CSS-файла, где упоминаются все изначальности.

Digitalien 10 October 2006 at 12:40
Отличное ководство! Я не всё до конца понял, но то что ты крут — это однозначно. =)

pepelsbey 10 October 2006 at 12:43
«Книгу не читал, но осуждаю» ;)

Begemot 13 October 2006 at 20:14
А как же ключевые слова? Я стараюсь их использовать. Иногда проценты и emы, но опять же относительно них.

pepelsbey 13 October 2006 at 20:20
С ключевыми словами связан баг IE, из-за которого их приходится применять с дополнительными ухищрениями. Проще использовать нормальные единицы измерения, которые дают возможность получать более точные дробные размерности.

akella 16 October 2006 at 10:56
Я обычно использую
body{font-size:62.5%}
Тогда легче считать размеры шрифта для разных элементов. 62.5% это ровно 10 пикселов по дефолту.
Соответственно потом в коде 1.1em-11px, .9em=9px - удобно.Честно говоря, даже и не знал пока о такой как оказывается проблеме.

pepelsbey 16 October 2006 at 12:10
Дело в том, что используя дробные значения при указании базового размера шрифта вы рискуете получить несколько другой их вид в браузерах, которые иначе округляют дробные проценты. К примеру — Opera. В прошлом дизайне у меня некоторые ширины измерялись в дробных em’ах относительно дробного базового размера. В итоге я получил серьёзную разноголосицу в разных браузерах. Как один из вариантов решения проблемы — держать основной font-size до самых глубин вложенности и указывать изменения только для конкретных элементов.
ps: вот истерия на злобу дня
pps: уточню — дроби использовать можно, а вот дроби дробей опасно.

demetrius 21 October 2006 at 16:18
ух ты! pepelsbey, спасибо! ты как обычно маг и волшебнег :)

idcontent 22 October 2006 at 23:08
100% однозначно :) в em’ах стремно

pepelsbey 23 October 2006 at 0:08
Em’ы — это наше всё. Это единица измерения, завязанная хотя бы на что-то. А вот проценты это и вправду стрёмно…

me2you 23 October 2006 at 10:09
Интересный материал, спасибо! :)

Алексей Новиков 22 December 2006 at 1:18
Если кто-то на своем компе выкручивает ручку масштабирования беспредельно, то сам виноват, и заслуживает, чтобы у него все развалилось и поехало :))

pepelsbey 22 December 2006 at 1:22
Средний человек имеет полное право на +/- 2 ступени для того, чтобы было комфортно читать. Так что в этих границах всё-таки стоит сохранить внешний вид макета :)


⇓ 

Поделись ссылкой на Seoded.ru с друзьями, знакомыми и собеседниками в соцсетях и на форумах! А сам сайт добавь в закладки! Так победим.

Поделиться ссылкой на эту страницу в:

Полезные ссылки:

Как-то зарабатывал я на ставках на матчи футбольные Заблокированные сайты станут снова доступны

Ещё материалы по этой теме:

Шаманство с покупкой сайтов 6 шагов для создания сайта на Drupal 18 вопросов заказчика о создании сайтов Объектно-ориентированная вёрстка Область реагирования в дизайне интерфейсов
основан в 2008 г. © Все права на материалы сайта Seoded.ru принадлежат Алексею Вострову.
Копирование (полное или частичное) любых материалов сайта возможно только с разрешения автора и при указании ссылки на источник.
Ослушавшихся находит и забирает Бабайка!