Веб-дизайн

Кирсанов Дмитрий Михайлович

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

Собственно говоря, технических затруднений при этом

быть не должно — броузер все равно покажет весь имеющийся текст и графические элементы, какой бы базовый кегль ни установил пользователь (и сколько бы этому пользователю ни пришлось прокручивать содержимое окна при, к примеру, слишком крупном шрифте). Другое дело — эстетические критерии: разбухание текста чревато не просто нарушениями пропорций, но нередко и нестыковками графических элементов, рассинхронизацией фона и переднего плана. Поэтому дизайнер обязан проверять, как чувствует себя его творение при уменьшении и особенно увеличении (до известных пределов, разумеется) базового кегля шрифта, причем проверки эти нужно повторять в разных версиях разных броузеров, так как их поведение в «экстремальных условиях» может сильно различаться.

Лучше всего страница должна выглядеть при том базовом кегле, который ставится по умолчанию (многие пользователи вообще не заглядывают в настройки и не знают, что базовый кегль можно изменить) в броузере, только что установленном на самой распространенной платформе (Windows 95/98) с самым распространенным экранным разрешением (сейчас в России эта величина составляет 800 на 600 пикселов). При этом страница должна безболезненно выдерживать увеличение базового кегля минимум в два раза.

Особо следует остановиться на видимом отличии размеров букв в разных шрифтах. Пользуясь тегом FONT с атрибутом face (а иногда и строго логическими тегами вроде CODE или SAMP, устанавливающими моноширинный шрифт), вы можете столкнуться с тем, что буквы «чужого» шрифта выглядят заметно больше или заметно меньше расположенных рядом букв основного шрифта. В таких случаях нужно удержаться от соблазна выровнять кегли атрибутом size, так как, во–первых, на другом компьютере соотношение размеров может быть прямо противоположным (оно сильно зависит от версий броузеров и установленных на компьютере шрифтов), а во–вторых, в случае логических тегов параметры оформления вообще не должны вас заботить — так, тег CODE нужен, чтобы пометить идентификатор или фрагмент программы, а не для того, чтобы переключиться в моноширинный шрифт. CSS (стр. 40) поддерживает как принятый в HTML механизм ступенчатого увеличения и уменьшения шрифта относительно базового кегля, так и задание кегля в абсолютных единицах длины (пикселах, пунктах и т. п.) с помощью свойства font–size. CSS уровня 2 добавляет свойство font–size–adjust, с помощью которого можно автоматически выравнивать разные шрифты не по «паспортной» величине кегля, а по высоте строчных букв, обеспечивая гораздо лучшее визуальное соответствие размеров разных шрифтов.

ШРИФТ

Так же как установка кегля шрифта имеет два аспекта — эстетический (чтоб прилично смотрелось) и приземленно–практический (чтобы можно было читать без рези в глазах), — так и выбор гарнитуры и начертания, кроме подробно обсуждавшихся в предыдущей главе художественных требований (стр. 133), должен удовлетворять одному гораздо более важному практическому условию: шрифт должен содержать изображения (глифы) для всех символов, использующихся в тексте. Эта проблема, в свою очередь, распадается на две части: нужно, во–первых, чтобы все требуемые глифы действительно были в шрифте, а во–вторых — чтобы кодировки текста и шрифта (по крайней мере, в части используемых символов) совпадали. О текстовых кодировках в HTML и связанных с этим вопросах мы уже говорили в гл. I (стр. 14).

Однако в практике веб–дизайна на первый план выступает еще более приземленная задача: найдя шрифт, идеальный с эстетической точки зрения и подходящий

по кодировке, нужно сделать так, чтобы его в документе увидел не только дизайнер, но и пользователь, — а для этого нужно как минимум переслать файл шрифта на пользовательский компьютер. Если же переслать шрифт невозможно, нужно | сообщить броузеру, какой шрифт имеется в виду, в надежде, что шрифт этот (или, по крайней мере, похожий на него) у пользователя уже есть.

Именно эта идея лежит в основе стандартных средств выбора шрифта в HTML и CSS. Значением атрибута face тега FONT может быть одно или несколько наименовании шрифтов, разделенных запятыми. Броузер, сканируя эту строку, пытается найти хотя бы один из заказанных шрифтов и включает его для вывода текста документа. Если ни один из них не найден (или если никаких указаний относительно шрифтов в документе не содержится), используется стандартный системный шрифт (на большинстве операционных систем это Times Roman).

CSS уровня 1 пользуется той же схемой: свойству font–family также можно присвоить в качестве значения строку, состоящую из имен шрифтов, — за тем исключением, что кроме названий конкретных гарнитур можно как один из вариантов (обычно на последнем месте в списке) указать родовой признак нужного шрифта — serif, sans–serif, monospace и т. п. Не найдя конкретных заказанных шрифтов, броузер будет по крайней мере знать, какой из имеющихся в системе шрифтов следует использовать в данном случае — например, Times (т. е. serif), Arial (sans–serif) или же Courier (monospace).

В CSS уровня 2 этому механизму при неизменном синтаксисе придано расширительное толкование: броузер обязан не просто найти первый же доступный из перечисленных шрифтов и переключиться в него, но и следить за соответствием набора символов текста репертуару глифов шрифта. Как только в тексте встретится отсутствующий в текущем шрифте символ, броузер обязан снова обратиться к списку рекомендованных шрифтов и посмотреть, нет ли там шрифта в нужной кодировке, подходящего для отображения этого символа. Таким образом, свойство font–family может содержать не только перечисление сходных по внешнему виду шрифтов в порядке убывания их пригодности и повышения вероятности их обнаружения, но и имена шрифтов с разными наборами символов, между которыми броузер будет переключаться в зависимости от того, какие символы встречаются в тексте.

Для практики важнее другой вопрос — какие шрифты с наибольшей вероятностью можно обнаружить на компьютере типичного пользователя и на какие, следовательно, шрифты может рассчитывать дизайнер, не желающий связываться с технологиями встраивания шрифтов в документ? Речь здесь может идти не о наименованиях отдельных шрифтов, а только об обобщенных шрифтовых типах, представленных на разных компьютерных платформах разными по названию (хотя нередко близкими по начертанию) шрифтами.

Кроме используемого по умолчанию шрифта с засечками, обычно представленного гарнитурой Times Roman, любая графическая операционная система имеет еще два типа шрифтов: рубленый (в Windows — Arial) и моноширинный (в Windows-Courier). Из них особенно часто в дизайне применяется рубленый шрифт, для выбора которого, с учетом названий стандартных рубленых шрифтов в разных операционных системах, можно порекомендовать такую запись в HTML:

<FONT face=«Arial, Geneva, Helvetica»>

и в CSS:

font–family: Arial, Geneva, Helvetica, sans–serif

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