Глава 6. Форматирование текста
171пока затель варьируется в пределах 72–100 пискелов на дюйм, новые Retinaдиплеи могут похвастаться
224 пикселами на дюйм.
С тех пор Apple добавила Retinaдисплеи на такие устройства, как iPad и ноутбуки. Другие изготови
тели планшетных компьютеров, например Amazon,
пытаются занять эту нишу, предлагая существенно больше пикселов на дюйм, чем на старых экра
нах. Что это все означает для вебдизайнеров?
Существенное увеличение объема работы. Далее мы еще вернемся к этой теме. Из одной из врезок вы узнаете, что эти экраны существенно влияют на изображения, и вам придется потрудиться, чтобы изображения на дисплеях с уплотненными пиксела
ми выглядели достойно.
Что же касается пикселов, упомянутых выше, то бра
узеры на устройствах, которые оснащены Retinaдис
плеями, фактически умножают значение в пикселах на два. То есть если указать для текста значение 16 пик
селов, веббраузеры, подстраиваемые под Retina
дисплей, фактически будут использовать на экране для прорисовки текста 32 пиксела. Это хорошая но
вость. Если браузер для отображения текста приме
нял бы только 16 из своих супермелких пикселов, то никто не смог бы прочитать то, что вы хотели сказать.
Иными словами, хотя дисплеи с повышенной плотностью уже входят в компьютерный мир мобильных и настоль
ных устройств, они не приведут к внезапному превра
щению изображения, которое задано в пикселах, в нечто отображаемое в микроскопических размерах.
ИНФОРМАЦИЯ ДЛЯ НОВИЧКОВКлючевые слова, проценты и единица измерения emВсе нижеперечисленные способы установки размеров текста средствами CSS с по-
мощью ключевых слов, процентных значений и единицы em увеличивают или уменьшают размеры шрифтов текста, отображаемого в окне браузера в соответ- ствии с определенными правилами. Другими словами, если вы не определите размер средствами CSS, браузер применит к тексту свои предопределенные параметры.
В большинстве случаев обычный текст, находящийся вне тегов заголовков, отобра- зится высотой 16 пикселов — это
основной (базовый) размер шрифта текста.
Путешественники по просторам Интернета могут корректировать настройки браузеров, увеличивая или уменьшая базовый размер шрифта, но для изменения базового размера шрифта
нужно изменять исходные настройки браузера, с чем многие просто не захотят связываться.
ПРИМЕЧАНИЕ
У большинства браузеров имеется функция увеличения, укрупняющая или уменьшающая текст, графику и всю страницу. Эти настройки по мере увеличения изображения всей страницы на самом деле не изменяют базовый размер текста. Комбинация клавиш Ctrl++ ( -+) на большинстве брау- зеров приводит к увеличению, а комбинация Ctrl+- ( --) — к уменьшению изображения. Удержи- вание нажатой клавиши Ctrl (Control) и использование колесика мыши также позволяет увеличивать и уменьшать изображение страницы.
Когда вы изменяете текст с помощью CSS, браузер берет базовый размер шриф- та текста (будь то первоначальный, высотой 16 пикселов, или другой) и корректи- рует его в большую или меньшую сторону в соответствии со значением ключевого слова, единицей измерения em, процентным отношением.
Ключевые слова. CSS предлагает семь ключевых слов, которые позволяют на- значить размер шрифта относительно базового: xx-small
, x-small
, small
, medium
, large
, x-large и xx-large
. CSS-код будет выглядеть следующим образом:
font-size: large;
172 Часть 2. Применение CSS
Среднее значение medium
— базовый размер шрифта браузера. Остальные значе- ния уменьшают или увеличивают размер шрифта с различными коэффициентами.
Другими словами, несмотря на то что, казалось бы, каждое изменение размера должно быть последовательным увеличением или
уменьшением предыдущего зна- чения, это не так. Обычно xx-small является эквивалентом 9 пикселов (принимая во внимание, что вы не изменяли базовый размер шрифта в своем браузере), x-small соответствует 10 пикселам, small
— 13, large
— 18, x-large
— 24, а xx-large
— 32 пик- селам.
Поскольку имеется ограниченный набор ключевых слов — всего семь вариан- тов, — если требуется большая свобода действий по масштабированию, необходи- мо обратиться к другим средствам и единицам измерения, описываемым ниже.
Процентные значения. Подобно ключевым словам, процентные значения из- меняют размер текста относительно шрифта, определенного браузером. Они обе- спечивают более гибкое и точное управление, чем ключевые large
, x-large и т. д.
Любой браузер имеет предопределенный базовый размер шрифта. У большинства он составляет 16 пикселов. Можно подкорректировать этот размер с помощью настроек браузера. Независимо от выбора установки основной размер шрифта эквивалентен 100 %. Другими словами, это равнозначно установке шрифта высо- той 16 пикселов.
Допустим, вы хотите отобразить
определенный заголовок в два раза больше, чем средний шрифт веб-страницы. Просто установите размер, равный 200 %:
font-size: 200%;
Или, если хотите, чтобы шрифт был немного меньше по умолчанию, укажите значение 90 %.
Приведенные примеры являются самыми простыми, но на практике встреча- ются более сложные ситуации. Например, относительный размер 100 % может изменяться, если наследуется значение тега-предка.
На веб-странице в левой нижней части рис. 6.11 есть текст в теге
, шрифт которого установлен размером 200 %. Это в два раза больше базового размера и со- ставляет 32 пиксела. Все вложенные теги наследуют его и используют для вычис- ления своих размеров шрифтов. Другими словами, для тегов, вложенных в
, размер 100 % равен 32 пикселам. Так, текст заголовка
Скачать 20.28 Mb.