web-development.ucoz.ru

Размер шрифта

В каких единицах измерения лучше задавать размеры шрифта? Стоит ли пользоваться ключевыми словами или задавать значения в конкретных единицах измерения? На эти и другие вопросы попробуем сейчас ответить. Для удобства чтения текста на странице его размер должен быть достаточным или же у пользователя должна быть возможность самостоятельно выбрать подходящий размер шрифта.

Как вы уже знаете, реальные единицы измерения (сантиметры, миллиметры, дюймы, пункты и пики) не очень хорошо подходят для Web-страниц. Таким образом, для задания размеров шрифта у нас остается три возможности: рх, em и ключевые слова.

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

В этом случае размер шрифта будет равен 12 пикселей на любом мониторе, но размеры самого пикселя будут зависеть от размеров и разрешения монитора. При этом пользователи браузеров Opera и Mozilla смогут увеличить размер шрифта, если он окажется для них мал. Opera был одним из первых, реализовавших такую возможность, и до сих пор является единственным браузером, который пропорционально увеличивает не только текст страницы, но и все остальные элементы, формирующие ее внешний вид, тем самым гарантируя, что пропорции страницы сохранятся и фиксированный дизайн не развалится на части. Mozilla увеличивает только текст, и, соответственно, фиксированный дизайн все равно может разрушиться, если пользователь даже незначительно увеличит размер шрифта.

Браузер Internet Explorer не позволяет увеличить размер шрифта, если он задан в фиксированных единицах. Таким образом, есть вероятность, что если пользователь, зайдя на вашу страницу, не найдет возможности увеличить слишком мелкий для него размер шрифта, он просто уйдет искать ту же информацию в другом месте. Если же материалы вашего сайта сильно заинтересуют пользователя, то он может попробовать предпринять те или иные меры самостоятельно. Например, можно скопировать содержимое страницы в текстовый редактор и там увеличить либо размер шрифта, либо масштаб отображения документа, чтобы стало комфортнее читать текст. Согласитесь, не каждый возьмет на себя такой труд, скорее он просто развернется и уйдет на другой сайт.

В таких случаях слишком большой размер текста - менее существенный недостаток, чем слишком мелкий. Можно также ориентироваться на средние показатели размеров мониторов и разрешений. Но показатели эти день ото дня меняются и, скорее, в пользу увеличения размеров мониторов и, соответственно, используемых разрешений экрана.

С одной стороны, при разработке фиксированного дизайна следует ориентироваться на минимальное разрешение 800x600, чтобы даже на самых маленьких мониторах страница просматривалась без дополнительной горизонтальной полосы прокрутки. Не будем забывать, что большинство пользователей сети пока предпочитают браузер Internet Explorer. А в отношении размера текста можно утверждать, что он должен нормально читаться и на больших разрешениях, хотя бы для разрешений 1024x768 и 1280x1024.

В относительно скором времени все большее количество нареканий по поводу безопасности браузера Internet Explorer и призывы переходить на более безопасные альтернативные браузеры могут изменить расстановку сил среди браузеров. Тем не менее, главенствующие позиции за Internet Explorer все же сохранятся еще достаточно долго. При "резиновом" дизайне точное соблюдение величин не требуется, поскольку такой дизайн создается из расчета, что он будет автоматически адаптироваться к различным мониторам и разрешениям. Главное, чтобы сохранялись пропорции при оформлении текста, заголовков и других текстовых блоков.

В этом случае для задания размеров шрифта незаменима единица em. Поскольку она вычисляется относительно базового размера, с ее помощью легко можно сохранить желаемые пропорции в тексте. Чаще всего посетители просматривают Web-страницы с отключенным масштабированием текста в окне браузера. В браузерах Opera и Mozilla при этом размер шрифта устанавливается равным 100%, а в браузере Internet Explorer он будет "средний".

Еще один доступный вариант задания размера текста в CSS - использование ключевых слов: xx-small, x-small, medium, large, x-large, xx-large. Как уже говорилось ранее, для получения каждого следующего размера используется множитель 1,2.

Ключевых слов всего семь, столько же и размеров было в HTML, только обозначались они цифрами от 1 до 7. Однако использование ключевых слов для задания размера шрифта сопряжено с некоторыми трудностями. Как вы уже знаете, в CSS эта шкала симметрична и в качестве значения по умолчанию используется значение medium, тогда как в HTML эта шкала несимметрична и значением по умолчанию является значение size="3". Из-за такого несоответствия получаем разные размеры шрифта в браузерах Internet Explorer, Opera и Mozilla.

Размер шрифта, установленный при помощи ключевых слов, в разных браузерах отличается

Как видно из этого рисунка, в браузере Mozilla размер medium равен размеру small в браузерах Internet Explorer и Opera, который они используют по умолчанию. Таким образом, можно сделать вывод, что происходит сдвиг значений из-за несовпадения значений по умолчанию в шкалах размера в CSS и HTML.

Разночтения и неодинаковое отображение в различных браузерах размеров шрифта, заданных при помощи ключевых слов, вызывают некоторые трудности в их использовании. Но все-таки их можно преодолеть, написав для разных браузеров отдельные таблицы стилей и подключая нужную с помощью средств JavaScript. Тогда в этих таблицах стилей размеры шрифта должны будут отличаться на один пункт. Так, в таблице для Internet Explorer и Opera будет написано правило: