Навигация

Партнеры


Комментариев: 0
 (голосов: 1)

CSS дизайн. Часть 25

S i 6
Проблема шрифтов и как с ней бороться


Создавая si6, дизайнер Шон Инман воспользовался преимуществами сеточной структу-
ры. Воображаемые границы разделяют макет на три колонки. Тонкие линии между строками текста подчеркивают взаимосвязь между заголовками в левой колонке и абзацами в средней части, к которым они относятся.
Сам текст аккуратно расположен точно поверх линий, нарисованных на фоновом изоб-
ражении. Благодаря такой точности страница выглядит безупречно, но это впечатление
легко разрушить, если пользователь изменит масштаб текста (а из-за малого кегля шрифта и слабой контрастности это может оказаться необходимым).

Ограниченность набора шрифтов


Быть может, наибольшую досаду при работе со шрифтами в Web вызывает тот факт, что выбор доступных шрифтов неширок и непредсказуем, учитывая, что
пользователь может устанавливать на свой компьютер одни шрифты и удалять другие. Маловероятно, что в обозримом будущем в этой области что-то кардинально изменится.
Если не считать шрифтов, используемых во Flash-анимациях или встроенных в графические изображения, то вся типография в Web базируется на тех шрифтах,
что есть на компьютере пользователя. Однако пользователи по большей части не являются дизайнерами, поэтому на их машинах редко можно встретить шрифты помимо тех, что поставляются в комплекте с операционной системой или приложениями. К примеру, на тех машинах, где установлен Microsoft Office, выбор шрифтов шире, чем на машинах, где этот пакет не стоит.
Системы Windows и Mac OS X комплектуются разными наборами шрифтов. В какой-то мере они пересекаются, но если еще учесть и различные варианты Unix (включая и Linux), то окажется, что уверенным можно быть лишь в том, что ни в чем нельзя быть уверенным. В табл. 1 перечислены некоторые шрифты, обычно присутствующие на
каждой из трех платформ.
В 1996 компания Microsoft выпустила комплект шрифтов, спроектированных специально для просмотра на экране. Это базовые шрифты для Web, их можно было
скачать бесплатно, поэтому они получили широкое распространение. В наши дни они обычно устанавливаются вместе с продуктами Microsoft. Вообще говоря, считается безопасным предполагать в дизайне, что эти шрифты существуют, но, когда
речь идет о Web, уверенным ни в чем быть нельзя. Именно по этой причине в CSS разрешается указывать несколько шрифтов и даже общее семейство на
тот случай, если ни одного из них в машине пользователя не окажется.

Общие семейства шрифтов


Инман хотел, чтобы в si6 использовались шрифты с гарнитурой Geneva, применяемые в Мае. Поскольку он знал о том, чем рискует, выбирая шрифт, отсутствующий в Windows, то включил в список предпочтительных шрифтов и альтернативы:

body {
font: 9px/16px Geneva,Arial,Tahoma,sans-serif;
)


В данном объявлении первые два значения - это кегль шрифта (9 рх) и интерлиньяж (16 рх). Затем перечислены допустимые шрифты в порядке предпочтительности. Если браузер не сможет найти шрифт Geneva, то он сначала будет искать Arial, затем Tahoma
и в самом крайнем случае, когда все другие возможности исчерпаны, шрифт без засечек, указанный в настройках по умолчанию.
Общие семейства шрифтов встроены в CSS, и совместимые браузеры автоматически находят шрифты, соответствующие каждому семейству (хотя пользователь
может отменить выбор браузера). Несмотря на то что от дизайнера не требуется во что бы то ни стало указывать общее семейство в каждом объявлении шрифтов,
лучше это сделать (если, конечно, вы не являетесь непоколебимым приверженцем Times New Roman).
Ниже перечислены все общие семейства с кратким описанием каждого.

serif

В шрифтах семейства s e r i f есть декоративные засечки, то есть небольшие черточки на концах штрихов. Почти всегда назначаемым по умолчанию шрифтом семейства s e r i f является Times New Roman, если только пользователь явно не указал иное.

sans serif

Шрифты семейства s a n s - s e r i f не имеют засечек. Почти всегда назначаемым по умолчанию шрифтом семейства s an - s e r i f является Arial.

monospace

Шрифты семейства monospace имеют постоянную ширину: каждая литера занимает одинаковое пространств. Так, например, ширина буквы i такая же, как буквы т . Такие шрифты бывают полезны, когда надо напечатать листинг программы, в котором
символы должны находиться друг под другом. Почти всегда назначаемым по умолчанию шрифтом семейства monospace является Courier.

cursive


Шрифты семейства c u r s i v e имитируют рукописное написание и применяются по большей части в заголовках. По умолчанию назначаются разные шрифты, но чаще всего это Comic Sans.

fantasy


Фантазийные шрифты применяются исключительно в декоративных целях - как правило, в заголовках. Поскольку к этой категории можно отнести очень много разных шрифтов, то предсказать, как будет выглядеть шрифт заданного размера в конкретном браузере, невозможно. Поэтому для серьезного дизайна ими не пользуются.
Красиво, но...
Если, занимаясь дизайном сайтов, вы в трех из четырех случаев пользуетесь шрифтами Verdana и Georgia, то иногда выбор шрифта, который заведомо отсутствует на машинах большинства посетителей, может показаться забавным способом привнести некото-
рое оживление в свою работу. Нужно только указать резервные шрифты для большинства пользователей, у которых нет основного, и тогда вы сможете наслаж-
даться новыми возможностями, позабыв об ограничениях.
Следующие комбинации хорошо работают, поскольку указанные шрифты более-менее похожи; первый шрифт в списке выглядит ново и неожиданно, а следующие - безопасная подстраховка:

body {
font-family: "Lucida Grande", "Lucida Sans
Unicode", Verdana,
sans-serif;
}
h2 {
font-family: Garamond, "Times New Roman",
serif;
}
dt, li {
font-family: Optima, Arial, sans-serif;
}
.sidebarCallout {
font-family: "Century Gothic", Verdana, sansserif;
}


Выше вы уже видели, что Инман в качестве основного шрифта указал Geneva, а в качестве резервных - Arial и Tahoma. Такая комбинация особенно удачна, посколь-
ку у всех трех шрифтов примерно одинаковая х-высота. Х-высота определена в книге Rob Carter, Ben Day и Philip Meggs «Typographic Design: Form and Communication» 3-е издание (John Wiley & Sons, 2002) как «высота строчных букв, исключая верхние и нижние выносные элементы. Чаще всего измеряется по строчной букве х».
Возможно, вы обратили внимание на то, что некоторые шрифты кажутся крупнее других, хотя указан один и тот же кегль; например, с кеглем 16 рх Verdana кажется заметно больше других шрифтов того же размера. Составляя список шрифтов, следует иметь в виду, что значение свойств f o n t - s i z e применяется к каждому из них; если наиболее предпочтительный для вас шрифт имеет относительно большую х-высоту, а на компьютерах пользователей установлен шрифт поменьше, то в некоторых ситуациях может получиться нечитаемый текст. Поэтому проверяйте свой выбор на разных браузерах и платформах.
В 1998 году в спецификации CSS2 появилось свойство f o n t - s i z e - a d j u s t специально для того, чтобы решить проблему неодинаковой х-высоты, но
поскольку оно так никогда и не было реализовано в большинстве браузеров, то из спецификации CSS 2.1 исчезло. Быть может, оно будет востребовано, когда завершится работа на CSS3, а пока полагаться на него не стоит.

Практический подход к выбору шрифтов


Из-за широкого разнообразия наборов шрифтов, установленных на компьютерах пользователей, невозможно точно предсказать, в каком виде сайт предстанет перед посетителями. Поэтому лучше не предаваться иллюзиям и смириться с тем фактом, что различия неизбежны.
Но вовсе необязательно во всех случаях ограничиваться только шрифтом Arial — пути для экспериментирования во Всемирной паутине все еще открыты.
Правильно отнесясь к намеку Шона Инмана, вы обнаружите, что отход в сторону от базовых шрифтов Web может принести свои плоды.




rfhnbyrb c css



autocad 2012 century gothic


century gothic mac linux

word mac os garamond georgia

Добавить статью в:
0



Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.



Поиск

***

Онлайн
Всего на сайте: 35
Гостей: 21
Пользователи: - отсутствуют
Роботы: robot Bot, Yahoo Bot, robot Bot, Google Bot, robot Bot, Yandex Bot, robot Bot, robot Bot, Yandex Bot, robot Bot, robot Bot, robot Bot, crawl Bot, robot Bot

20-ка посетителей: bdpmcohuch, ssnlkshuch, Hogarbany, taAnipse, zrEquigue, Evgesha1977, nndiubhuch, axpqmchuch, manuelsr16, npvtjjhuch, qpmjjahuch, dqsbtxlb48, AgnesAccony, YussufBuMe, deEquigue, usbyzgcc39, ukNonfoula, oslvjchuch, fhgiyzhuch, saundrari2


Партнеры

Мы в социальных сетях
Популярные статьи

Последние комментарии
Файлы почтой

Облако тегов
Abstract, ai, background, backgrounds, clipart, design, eps, Flyer, frame, frames, Graphic, jpg, photo, Photoshop, PNG, PSD, scrap, Stock, template, vector, Wallpapers, Вектор, Графика, Дизайн, Клипарт, Обои, Рамка, Рамки, Цветы, Шаблон, исходники, картинки, кисти, новый год, скрап, фоны, фото, фоторамка, фотошоп, шаблоны

Показать все теги