<< Пред. стр.

стр. 26
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>

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



Совет
Продуманный список предпочитаемых шрифтов должен составлять-
ся таким образом: сначала указывайте шрифт Windows, за ним его эк-
вивалент для операционной системы Мае, и в конце приводится
обобщенная категория шрифта: serif (с засечками), sans serif (без
засечек) или monospace (моноширинный).
Строим Web-сайты
248


Совет
В конце списка предпочитаемых шрифтов всегда включайте катего-
рию serif, sans-serif или monospaced в зависимости от типа шрифт \,
который желательно использовать для отображения текста браузе-
ром. Эти три общие категории шрифта не связаны с какой-либо конк-
ретной гарнитурой. Точнее они соответствуют шрифтам с засечками,
без засечек, моноширинному, используемым по умолчанию на
компьютере посетителя. Вызов шрифта по его типу представляет со-
бой безотказный вариант. Если все остальные шрифты, указываемые
вами, будут отсутствовать на компьютере посетителя, вы гарантиру-
ете, что в браузере будет отображаться текст с помощью шриф-а
требуемой категории.




Выбор наилучшей гарнитуры
Любой художник-дизайнер, занимающийся разработкой стиля книги, скажет вам,
что гарнитура играет большую роль в создании профессионального вида книги. Ес-
ли планируется сделать книгу в виде серьезного, авторитетного исследования либо
беззаботного, легкого чтива, дизайнер пытается выбрать гарнитуру, которая визу-
ально создает соответствующее настроение и ощущение. Вряд ли найдется много
книг по философии Гегеля, которые выполнены шрифтом комиксов. Кроме того,
выбрать надлежащую гарнитуру дизайнеру помогает размер текста. Некоторые гар-
нитуры хорошо подходят для малых размеров в силу своей удобочитаемости, тогда
как другие гарнитуры по той же причине лучше использовать для больших размеров
шрифтов.
Web-оформление не так сложно, как дизайн книг. Здесь гораздо меньше набор гарни-
тур, и количество устанавливаемых параметров не так велико, даже в таком надежыои
языке, как CSS (каскадные таблицы стилей), что сужает возможности дизайна, но од-
новременно облегчает задачу выбора правильной гарнитуры.
Ниже перечисляется несколько практических правил по выбору гарнитуры:
• Шрифты с засечками, такие, как Times New Roman, хороши для Web-сайтов с серь-
езным содержанием;
• Шрифты без засечек, такие, как Arial, лучше подойдут для Web-сайтов с легким, иг-
ровым содержанием;
• Шрифты с засечками и стандартными размерами делают большие фрагменты
текста удобными для чтения;
• Широкие гарнитуры, такие, как Verdana или Georgia, лучше использовать для ма-
лых размеров шрифта. При больших размерах шрифта эти гарнитуры выглядят
чрезмерно большими;
• Шрифты без засечек обычно чаще, чем шрифты с засечками, используют для за-
головков.
ГЛАВА 4 8 .
Управление размером шрифта
В главе 47 объяснялось, как с помощью тега <font> в HTML и атрибута font-family
в каскадных таблицах стилей (CSS) можно задавать гарнитуру шрифта текста на Web-
странице. Следуя аналогичным правилам, можно задавать размер шрифта в атрибуте
s i z e тега <font> или в атрибуте f o n t - s i z e каскадных таблиц стилей.



использование тега < font >
Атрибут s i z e тега <f ont> выглядит подобно следующему примеру:
<font face="Arial, Helvetica, sans-serif" size="4">
Значение, указываемое в атрибуте size, не является ни пикселами, ни пунктами, ни
дюймами, ни футами, ни миллиметрами, ни милями. Вместо этого размер соответ-
ствует одному из семи предопределенных размеров текста в HTML. Обычный текст
на Web-странице отображается с размером 3. Таким образом, данный текст с разме-
ром 4 на один размер больше обычного текста. Как показано на рисунке 48.1, мини-
мальный размер текста равен 1, а максимальный размер — 7.
Другим возможным значением атрибута s i z e является относительный размер, в ко-
тором размер шрифта выражается как некоторое число плюс или минус текущий раз-
мер. В языке HTML относительный размер описывается таким образом:
<font face="Arial, Helvetica, sans-serif" size="+l">
или
<font face="Arial, Helvetica, sans-serif" size="-3">



File ?dft View Favorites tools


Few St* 1


Font Size 2


Font Size 3


Font Size 4



Font Size 5

Font Size 6
Font Size 7

Рис. 48.1. При использовании тега <font> для выбора доступны
только семь типов размеров, пронумерованных числами от 1 до 7
Строим Web-сайты
250

В первом примере шрифт увеличивается на один размер относительно размера пре-
дыдущего текста, тогда как во втором примере шрифт уменьшается на три размера.
Минимальный относительный размер равен -6, а максимальный относительный раз-
мер равен +6.



использование атрибута font-size
ЕСЛИ семь размеров шрифта кажутся вам нелепым ограничением, вы не одиноки в сво-
их чувствах. Каскадные таблицы стилей спасают положение, предлагая практически
неограниченное число размеров шрифта. Просто добавьте атрибут f o n t - s i z e в оп-
ределение своего стиля и укажите значение и единицы измерения, которые хотите
использовать:
Р
font-family: A r i a l , Helvetica, sans-serif;
font-size: 18px;


Текст, размеченный тегами абзацев, использующими данное правило стиля, отобра-
жается в браузере так, как показано на рисунке 48.2.


Часто задаваемые вопросы
Можно ли получить более семи типов шрифта в HTML?
Сообразительные Web-дизайнеры пытаются выжать из HTML до
полнительные размеры шрифта путем установки в теге <fon t > раз-
мера 7 в качестве начального значения и затем сразу увеличивая
размер с помощью относительного тега шрифта. Если вы относи-
тесь к таким умельцам, можете порадоваться своей хитрости, но, п
сожалению, браузер не поддается на такие уловки. Максимальный
размер, который можно получить с помощью HTML, равен 7. Брау-
зером игнорируются относительные значения, которые добавляют
ся, чтобы увеличить размер выше 7 (или уменьшить менее 1).



В таблице 48.1 сведены разнообразные единицы измерения размера шрифта, кото-
рые предоставляются в каскадных таблицах стилей. Однако знайте, что изменение
размера шрифта в браузере связано с определенным риском. Поскольку браузеры
предоставляют неполную поддержку каскадных таблиц стилей и поскольку не суще-
ствует двух браузеров, одинаково реагирующих на изменение размеров, лучше при-
держиваться относительных единиц измерения для размера шрифта текста. Как по-
казано в таблице 48.1, относительными единицами измерения являются em, ex и рх;
однако хорошо известно, что браузеры игнорируют единицы измерения em и ex.
Вследствие этого в качестве единственной реальной альтернативы остаются старые
добрые пикселы.
ГЛАВА 48. Управление размером шрифта 251




This paragraph appears in 18-pixel Arlal.

So does this paragraph.

So does this one.




Рис. 48.2. С помощью каскадных таблиц стилей можно задавать
любые размеры шрифта с разнообразными единицами измерения

Табл. 48.1. Единицы измерения длины в каскадных таблицах стилей

Категория
Единицы Описание
измерения
cm Сантиметры Абсолютные
em Эм; 1 эм равен приблизительно ширине Относительные
заглавной буквы М
ex Х-высота; 1 ех равен приблизительно Относительные
высоте строчной буквы х
in Дюймы Абсолютные
mm Абсолютные
Миллиметры
pc Пайки (1 пайка содержит 12 пунктов и Абсолютные
равна 4,23 мм)
pt Пункты Абсолютные
px Пикселы Относительные

Относительные единицы измерения не являются относительными в том смысле, что
их значения изменяются. Вместо этого фактический размер единиц измерения зави-
сит от ряда факторов. Например, разрешающей способностью экрана определяется
размер пиксела. Если на экране монитора отображается 800 х 600 пикселов, размер
пикселов будет больше, чем на экране монитора, отображающего 1600 х 1200 пиксе-
лов, в предположении, что размеры обоих экранов одинаковы.
Относительные единицы измерения позволяют браузеру подстраиваться под кон-
кретные настройки экрана посетителя. Если вместо относительных единиц использу-
ются абсолютные единицы измерения, такие, как пункты, пайки или дюймы,
вид Web-страницы полностью находится во власти браузера, который определяет,
насколько большим должен быть дюйм на экране. Нет ничего удивительного в том,
252 Строим Web-сайты

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


использование констант длины В каскадных таблицах стилей
ЕСЛИ задание размеров шрифта с помощью относительных или абсолютных единиц
не привлекает вас из-за возможных проблем, можно подставить одну из семи констант
длины в каскадные таблицы стилей. Вы догадываетесь: эти константы приблизитель-
но эквивалентны семи размерам шрифта в HTML, показанным на рисунке 48.3. Таким
образом, вы снова вовлечены в «игру» с размерами, но в этом способе вы не оставля-
ете браузеру шансов отобразить Web-страницу с неразборчивым текстом.




This paiagraphis small.

This paragraph is medium

This paragraph is large.


This paragraph is x-laige.

This paragraph is xx-large.




Рис. 48.3. В случае сомнений каскадные таблицы стилей
предоставляют семь констант длины, которые приблизительно
соответствуют семи размерам шрифта в HTML

Семь констант длины, используемые в каскадных таблицах стилей, это: хх-small x-
small, small, medium, large, x - l a r g e и xx-large. Одно из этих ключевых слов по-
медцаетс^ в определение стиля вместо значения размера и единиц измерения, подоб-
но следующему примеру:
Р(
font-size: x-large;


Можно также задавать относительную константу длины для настройки величины
шрифта относительно его текущего размера, каким бы он ни был. Используйте клю-
чевое слово l a r g e r , чтобы увеличить размер шрифта на один размер, или восполь-
зуйтесь ключевым словом smaller, чтобы сделать шрифт на один размер меньше:
<р s t y l e = " f o n t - s i z e : x-large;">
This type s i z e i s x - l a r g e , but <span s t y l e = " f o n t - s i z e :
s m a l l e r ; " > t h i s type s i z e i s one s i z e smaller.</span>
ГЛАВА 48. Управление размером шрифта 253


Дневник: способ изменения
размера шрифта
Разные дизайнеры ПОДХОДЯТ К проблеме задания размера шрифта в каскадных табли-
цах стилей по-разному. Некоторые говорят: «Никогда не изменяйте размер шрифта, и
точка». Другие советуют придерживаться констант длины. Третьи утверждают, что из-
менение размера шрифта не вызывает проблем, если пользоваться только относи-
тельными единицами измерения..
Основываясь на подавляющем числе пользователей, бороздящих Интернет с по-
мощью более или менее современных браузеров, по-видимому, следует считать, что
задание размера шрифта с помощью относительных единиц измерения является дос-
таточно надежной технологией для Web-сайтов общего назначения. Это заключение
основывается на предположении, что большинство посетителей Web-сайтов пользу-
ется браузером Microsoft Internet Explorer на настольных или переносных компьюте-
рах, управляемых операционными системами Windows. Это не является рекламой
программного продукта. Это простая констатация существующего факта. Последняя
пара версий Internet Explorer для Windows обрабатывает в каскадных таблицах стилей
единицы измерения в виде пикселов достаточно хорошо. Таким образом, проблема
для большинства практических случаев решена. Однако если вы ожидаете, что на
ваш Web-сайт будет заходить много посетителей с карманных компьютеров, компью-
теров Macintosh, с помощью браузеров Netscape или Windows-браузеров старых вер-
сий, следует прислушаться к мудрым советам консерваторов и не варьировать разме-
ры шрифта текста.

Главная цель Web-сайта — представление информации. Представляемое содержимое
должно быть легко доступно и удобно для пользования, поэтому оно обязательно
должно быть удобочитаемым. Любые аспекты эстетики и дизайна должны всегда под-
чиняться требованиям практичности, несмотря на возможные противоречия с внут-
ренним эстетическим чувством Web-дизайнера.
Конечно, связь между эффективным дизайном и удобством пользования является нет-
ривиальной. Эта тема здесь не обсуждается. Однако одно дело стремиться к эффек-
тивному и интуитивно понятному графическому макету, и другое дело - вдаваться в
тонкости шрифтового оформления Web-страниц. Таким образом, если изменение раз-
меров шрифта помогает сделать Web-сайт более удобным для большей части вашей
аудитории, то этим стоит заняться.
ГЛАВА 4 9 .
Управление интервалами
В HTML величина зазора между элементами в достаточно большой степени определя-
ется браузером. В браузер встроены механизмы, позволяющие представлять, как вы-
глядит текст, размеченный каждым тегом. Конечно, можно сделать принудительный
обрыв строки с помощью тега <br>, но это грубый и неточный метод. Художники-ди-
зайнеры понимают, что пустое, или отрицательное, пространство также важны, как
занятое, или положительное, пространство. Пробелы являются крайне важным эле-
ментом дизайна, и они требуют управления с точностью до пиксела. Не требуется раз-
рабатывать много Web-страниц, чтобы начать желать лучших параметров для управле-
ния зазорами, чем те, что предлагаются в HTML.
Хорошо, что есть каскадные таблицы стилей. Они предоставляют все виды управле-
ния зазорами: пространство вокруг элементов, пространство внутри элементов, ин-
тервалы между строками текста, зазоры между словами и интервалы между буквами.
В главе 26 обсуждается вопрос задания полей страницы с помощью каскадных таблиц
стилей. В этой главе рассматриваются другие виды зазоров, регулируемых с помощью
каскадных таблиц стилей, в особенности те из них, которые относятся к тексту.



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




This paragraph has a bottom margin of 200 pixels This is the end of the paragraph




This is the beginning of the next paragraph, after a healthy stretch of white space




Рис. 49.1. У этого абзаца задано нижнее поле в 200 пикселов,
которое создает приятное для глаз пустое пространство
для отделения абзаца от следующего за ним текста
ГЛАВА 49. Управление интервалами 255

Листинг 49.1. Исходный код страницы, вид которой в браузере
показан на рисунке 49.1
<р style="margin-bottom: 200 px;">This paragraph ha.s a bottom mar-
gin of 200 pixels. This is the end of the paragraph.<7p>

<p>This is the beginning of the next paragraph, after a healthy
stretch of white space.</p>



Совет
При добавлении пустого пространства с помощью полей к несколь-
ким элементам обычно рекомендуется выбирать верхнее или нижнее
поле, а также левое или правое поле, и последовательно придержи-
ваться сделанного выбора для каждого правила стилей элементов.
Другими словами, не задавайте в одном элементе верхнее поле, а в
другом элементе нижнее поле. Если вы будете придерживаться тако-
го правила, у вас не возникнут проблемы, скажем, когда
200-пиксельное нижнее поле стыкуется с 200-пиксельным верхним
полем., образуя зазор в 400 пикселов.


Существует четыре атрибута полей: margin-top, margin-bottom, margin-left и
margin-right. Атрибуты могут иметь разные значения и единицы измерения (таб-
лицу единиц измерения, действующих в каскадных таблицах стилей, см. в главе 48).
Как видно из кода для Web-страницы, показанной на рисунке 49.1, можно не задавать
все атрибуты полей. Указывайте лишь поля, которые необходимы для создания требу-
емых отступов.


Совет
Для быстроты можно использовать групповой атрибут margin. При
указании единственного значения для этого атрибута создаются рав-
ные поля со всех четырех сторон элемента, как в следующем приме-
ре кода:

margin: 200px;
Можно также задавать четыре разные значения, представляющие
верхнее, правое, нижнее и левое поля, соответственно, как в следу-
ющей строке кода:
margin: 100 50 2V0 25рх;
Строим Web-сайты
256


Управление пространством внутри элементов
Атрибуты набивки определяют величину пробела между границами элемента и нача-
лом содержимого элемента. Чтобы получить боле*; полное представление о том, как
работает набивка, представьте, что каждый элемент на экране имеет свой собствен-
ный невидимый прямоугольник, как те, что показаны на рисунке 49.2. С помощью на-
бивки добавляется пробел между краем прямоугольника и содержимым внутри его
Как и в случае полей, существует четыре атрибута набивки: padding-top, padding-
bottom, padding-left и padding-right. Каждый из атрибутов можно задавать от-
дельно, а можно не указывать в определении стиля те из них, которые вам не нужны:
Р(
padding-top: 20px;
padding-left: 10px;




ф—#irst-level heading?—f
-s
Й
This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph. This is a paragraph.
[3 ttis is a paragraph. This is a paragraph. This is a paragraphJQ—
This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph.


Рис. 49.2. Набивка определяет величину пробела между
внешней границей элемента и содержимым внутри границ


<< Пред. стр.

стр. 26
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>