Задание размера текста с помощью свойства font-size
При установке определенного размера шрифта, как правило, преследуются две цели. Во-первых, вы хотите гарантировать, что текст достаточно крупный для чтения. Во-вторых, вы хотите иметь возможность изменять размеры текста заголовков или отдельных фраз или слов с целью их выделения. Поскольку по умолчанию для различных типов браузеров (или даже различных версий одного и того же типа браузера) размер шрифта может отличаться, если вы хотите, чтобы текст Web-страницы выводился шрифтом определенного размера, его необходимо указать в коде Web-страницы.
Размер шрифта играет особенно важную роль, если на странице содержится большой объем текста. Если размер шрифта будет слишком маленьким, посетитель вскоре устанет читать и покинет страницу, так и не прочитав всего ее содержимого. Если же размер шрифта слишком велик, он может отвлекать внимание посетителя и, как результат, посетитель может пропустить важную информацию, содержащуюся на Web-странице.
Свойство font-size каскадных списков стилей позволяет задавать размер выводимого на странице текста. Более того, написание правил списков стилей, управляющих размером шрифта, во внешних списках стилей дает возможность легко экспериментировать со значениями свойства font-size для определения оптимального размера шрифта. Помните, что изменение одного правила во внешнем каскадном списке стилей приводит к изменению размера шрифта на всех Web-страницах, связанных с этим списком стилей.
В то время как атрибут size дескриптора <font> позволяет выбирать размер шрифта только из 14 имеющихся размеров (од 1 до 7 и от -1 до -7), выражаемых в пунктах, пикселях и параметрах em, свойство font-size каскадных списков стилей предоставляет в ваше распоряжение неограниченное количество размеров шрифтов. Специалисты, работающие с печатью, ближе всего знакомы с выражением размера шрифта в пунктах. При печати пункт представляет собой 1/72 дюйма. Следовательно, символ размером 12 пунктов при печати будет иметь размер 1/6 дюйма, а символ размером 72 пунктов — 1 дюйм. К сожалению, на мониторе текст одинакового размера в пунктах может быть разного размера, поскольку браузеры могут работать в системах, в которых мониторы имеют различ- ное разрешение.
Для указания размера шрифта в пунктах к численному значению размера в свойстве font-size необходимо добавить буквы pt, как показано в следующем примере:
р {font-size:12pt} b {font-size:18pt}
После считывания правил списка стилей из этого примера Web-браузер выведет на экран текст абзаца размером 12 пунктов, а полужирный текст — размером 18 пунктов.
Часто Web-дизайнеры устанавливают размеры шрифтов в пикселях, поскольку они чаще работают не с бумагой, а с экраном компьютера. На экранах компьютеров положение объектов и их размеры, как правило, задаются в пикселях, поэтому не удивительно, что Web-дизайнеры для задания размеров шрифтов используют пиксели. Единственным преимуществом пикселей по сравнению с пунктами является то, что независимо от разрешения монитора компьютера шрифт одного и того же размера будет выводиться одинаково. Это справедливо даже для различных аппаратных и программных платформ. Более того, выражение размеров графических изображений и шрифтов в пикселях позволяет легко сохранять взаимный размер теста и изображений на всех страницах Web-сайта.
Для указания размера шрифта в пикселях к численному значению размера в свойстве font-size необходимо добавить буквы рх, как показано в следующем примере:
body, p {font-size:10рх}
Обратите внимание, что, как правило, размер читабельного текста должен составлять не менее 9 пикселей.
Еще один метод установки размера шрифта — выражение его по отношению к размеру родительского элемента в пунктах. Отношения типа родительский элемент/дочерний элемент устанавливаются путем включения одного Web-элемента в другой. Внешний элемент считается родительским, а внутренний — дочерним. Например, в следующем HTML-коде элемент цитирования является дочерним элементом для элемента абзаца, поскольку он заключен между начальным и конечным дескрипторами абзаца:
<р>Весь текст, заключенный между набором начального и конечного дескрипторов параграфа, является частью элемента параграфа.
<cite>Этот элемент цитаты представляет собой дочерний элемент по отношению к тому элементу параграфа, в рамках начального и конечного дескрипторов которого он размещен</cite>
Когда мы используем один HTML-элемент внутри другого, внутренний элемент является дочерним, а внешний -- родительским.</р>
Параметр em позволяет устанавливать размер Web-элемента в отношении размера его родительского элемента в пунктах. Параметр em представляет собой ширину буквы "М" текущего шрифта. Поэтому, если в списке стилей установлены следующие правила, размер текста цитаты, расположенного внутри текста абзаца, будет в 1.5 раза больше, чем размер текста абзаца:
cite {font-size:1.5em}
р {font-size:12pt}
Если применить эти правила для кода приведенного выше примера, Web-браузер выведет на экран текст абзаца (родительский элемент) размером 12 пунктов, а текст цитаты высотой 18 пунктов, т.е. в 1.5 раза больше, чем размер родительского элемента.
На рис. 4.7 показан пример использования следующего списка стилей для форматирования четырех текстовых элементов (абзац, полужирный текст, элемент списка и цитата):
<head>
<title>ycтановка размера текста с использованием пунктов, Em и пикселей</title>
<style type="text/css">
p {font-family:helvetica,"times new roman",courier; font-size:12pt}
b {font-size:18pt}
cite {font-size:1.5em}
li {font-size:30px}
</style>
</head>
Рис. 4.7. Текст Web-страницы при установке размера шрифта с помощью пунктов, параметров ет и пикселей