Книга css3 3е издание Серия Бестселлеры OReilly
 Скачать 20.28 Mb.
|
|
153 Простой способ добавления полужирного и курсивного вариантов Самый простой способ добавления полужирного и курсивного вариантов шрифтов заключается в добавлении к директиве @font-face свойств font-weight и font-style Обычно CSS-свойство font-weight требует от браузера показать шрифт в полужир- ном, ( bold ), обычном ( normal ) варианте или в одном из нескольких других вариантах плотности, а свойство font-style требует от браузера отобразить шрифт в курсивном ( italic ) или обычном ( normal ) варианте. Но при использовании в директиве @font- face свойство font-style требует от браузера применить шрифт, когда стиль запра- шивает конкретный вариант шрифта. Предположим, что у вас есть шрифт под названием PTSans. Вы начинаете с обыч- ной, не полужирной и не курсивной версии шрифта. Различные форматы шрифта начинаются с PTSansRegular ( PTSansRegular.eot , PTSansRegular.ttf и т. д.). В таблицу стилей нужно добавить следующую директиву @font-face : @font-face { font-family: 'PTSans'; src: url('PTSansRegular.eot'); src: url('PTSansRegular.eot?#iefix') format('embedded-opentype'), url('PTSansRegular.woof') format('woff'), url('PTSansRegular.ttf') format('truetype'), url('PTSansRegular.svg') format('svg'); font-weight: normal; font-style: normal; } Обратите внимание на следующее. Для семейства шрифтов во второй строке показанного выше кода используется об- щее имя — PTSans , вместо имени, указанного для файла шрифта, — PTSansRegular Для свойства font-weight установлено значение normal , поскольку эта версия шрифта не является полужирной (строка 8). Для свойства font-style задано значение normal , поскольку это не курсивная версия шрифта (строка 9). ПРИМЕЧАНИЕ В показанных здесь примерах кода предполагается, что файлы шрифтов PTSansRegular.eot, PTSans- Bold.eot и т. д. находятся в одной и той же папке, что и таблица стилей. Если бы использовались разные папки, пришлось бы перенастроить URL для точного указания места, где находятся файлы шрифтов по отношению к таблице стилей. Теперь предположим, что у вас имеется курсивная версия шрифта, имя файла которой начинается с PTSansItalic. Его следовало бы добавить к таблице стилей: @font-face { font-family: 'PTSans'; src: url('PTSansItalic.eot'); src: url('PTSansItalic.eot?#iefix') format('embedded-opentype'), url('PTSansItalic.woof') format('woff'), url('PTSansItalic.ttf') format('truetype'), 154 Часть 2. Применение CSS url('PTSansItalic.svg') format('svg'); font-weight: normal; font-style: italic; } В строке 2 используется то же самое имя font-family — PTSans. Но значение свойства font-style изменилось на italic (строка 9). Тем самым браузеру сообща- ется, что указанный шрифт является курсивной версией шрифта PTSans. Нужно также добавить подобные директивы @font-face и для полужирной, а также комби- нированной полужирной и курсивной версий: @font-face { font-family: 'PTSans'; src: url('PTSansBold.eot'); src: url('PTSansBold.eot?#iefix') format('embedded-opentype'), url('PTSansBold.woof') format('woff'), url('PTSansBold.ttf') format('truetype'), url('PTSansBold.svg') format('svg'); font-weight: bold; font-style: normal; } @font-face { font-family: 'PTSans'; src: url('PTSansBoldItalic.eot'); src: url('PTSansBoldItalic.eot?#iefix') format('embedded-opentype'), url('PTSansBoldItalic.woof') format('woff'), url('PTSansBoldItalic.ttf') format('truetype'), url('PTSansBoldItalic.svg') format('svg'); font-weight: bold; font-style: italic; } Иначе говоря, для охвата всех вариантов полужирного, курсивного и обычного текста вам нужны четыре директивы @font-face : обратите внимание на то, что для всех случаев используется одно и то же имя font-family , а изменяются только свой- ства src (чтобы указывать на разные файлы) и свойства font-weight и font-style Преимущество этого метода состоит в том, что к тексту можно назначить обыч- ный шрифт, применить к коду HTML теги и и позволить браузеру самому выбирать файл шрифта для загрузки и использования. В данном примере, если нужно назначить шрифт PTSans всем абзацам, достаточно просто добавить этот стиль к своей таблице стилей: p { font-family: PTSans; } Затем можно будет применять HTML-разметку в тегах абзацев. Например, у вас может быть использован следующий абзац: When I was younger, I could remember anything, whether it had happened or not -- Mark Twain Глава 6. Форматирование текста 155 Когда веб-браузер прочитает таблицу стилей (с четырьмя директивами @font-face и стилем тега p ), он станет отображать большинство абзацев с использованием шриф- та PTSansRegular. Но для слова anything, заключенного в теги будет применять- ся шрифт PTSansItalic, для слова not внутри тегов — шрифт PTSansBold, а для слов Mark Twain внутри и , и — шрифт PTSansBoldItalic. Эти директивы работают даже для заголовков. Если вы создаете стиль для фор- матирования всех тегов h1 с использованием шрифта PTSans, то он может иметь следующий вид: h1 { font-family: PTSans; } При наличии данного стиля веб-браузер будет фактически применять полужирную версию шрифта PTSans, поскольку заголовки обычно отображаются полужирным шрифтом. (При использовании данной технологии с привлечением нескольких вари- антов шрифтов уже не нужно, как раньше, добавлять фрагмент font-weight: normal; .) К сожалению, Internet Explorer 8 и более ранние версии не понимают этого метода и будут использовать для всего текста шрифт PTSansRegular. Для тегов и Internet Explorer будет создавать искусственный курсивный и искусственный полу- жирный варианты шрифтов, то есть он будет наклонять шрифт PTSansRegular на эк- ране для получения курсива и делать шрифт PTSansRegular толще для получения по- лужирного варианта. Получающиеся в результате этого сгенерированные компьютером полужирный и курсивный варианты обычно выглядят неважно. ПРИМЕЧАНИЕ В учебных файлах этой главы в папке webfonts-demo присутствуют примеры использования обеих технологий включения полужирной и курсивной версий шрифтов. В файле webfonts.html использу- ется первая из рассматриваемых технологий, а в файле webfonts-ie-safe.html — вторая. Добавление полужирного и курсивного вариантов и поддержка Internet Explorer 8 Если вы все еще поддерживаете Internet Explorer 8 (или более раннюю версию), пре- дыдущее решение, касающееся полужирного и курсивного вариантов, не будет рабо- тать так же хорошо. Можно получить шрифты для работы в Internet Explorer 8, но это требует дополнительных усилий. Для начала нужно по-прежнему создать четыре директивы @font-face , по одной для каждого варианта шрифта. Но вместо задания для них одного и того же имени семейства font-family (например, PTSans ), каждому из них дается свое уникальное имя ( PTSansRegular , PTSansItalic и т. д.). Иными словами, че- тыре директивы @font-face нужно переписать следующим образом: @font-face { font-family: 'PTSansRegular'; src: url('PTSansRegular.eot'); src: url('PTSansRegular.eot?#iefix') format('embedded-opentype'), url('PTSansRegular.woof') format('woff'), url('PTSansRegular.ttf') format('truetype'), 156 Часть 2. Применение CSS url('PTSansRegular.svg') format('svg'); } @font-face { font-family: 'PTSansItalic'; src: url('PTSansItalic.eot'); src: url('PTSansItalic.eot?#iefix') format('embedded-opentype'), url('PTSansItalic.woof') format('woff'), url('PTSansItalic.ttf') format('truetype'), url('PTSansItalic.svg') format('svg'); } @font-face { font-family: 'PTSansBold'; src: url('PTSansBold.eot'); src: url('PTSansBold.eot?#iefix') format('embedded-opentype'), url('PTSansBold.woof') format('woff'), url('PTSansBold.ttf') format('truetype'), url('PTSansBold.svg') format('svg'); } @font-face { font-family: 'PTSansBoldItalic'; src: url('PTSansBoldItalic.eot'); src: url('PTSansBoldItalic.eot?#iefix') format('embedded-opentype'), url('PTSansBoldItalic.woof') format('woff'), url('PTSansBoldItalic.ttf') format('truetype'), url('PTSansBoldItalic.svg') format('svg'); } Заметьте, что у каждой директивы @font-face имеется собственное название семейства, которое соответствует варианту шрифта: PTSansRegular , PTSansItalic , PTSansBold и PTSansBoldItalic Кроме того, обратите внимание на то, что свойства font-weight и font-style , ко- торые использовались ранее, здесь уже отсутствуют за ненадобностью. Труднее будет обстоять дело с применением шрифта. В предыдущем примере свойство font-family просто применялось к стилю: p { font-family: PTSans; } А теперь, к сожалению, вам придется применять разные имена шрифтов для различных тегов: для p — имя обычного шрифта, для em — имя курсивного шрифта, для strong — имя полужирного шрифта. А чтобы справиться со случаем примене- ния полужирного курсива придется составлять селектор потомка. То есть, чтобы могли работать различные варианты шрифта PTSans, нужно создать четыре стиля, содержащие довольно много строк кода: p { font-family: PTSansRegular; font-size: 48px; Глава 6. Форматирование текста 157 font-style: normal; font-weight: normal; } p em { font-family: PTSansItalic; font-style: normal; font-weight: normal; } p strong { font-family: PTSansBold; font-style: normal; font-weight: normal; } p strong em, p em strong { font-family: PTSansBoldItalic; font-weight: normal; font-style: normal; } В первую очередь обратите внимание на то, что это за четыре стиля: для селектора p используется шрифт PTSansRegular; p em представляет собой селектор потомка для тега , находящегося внутри тега ; для этого стиля используется шрифт PTSansItalic; p strong представляет собой еще один селектор потомка, где шрифт PTSansBold применяется для тега , когда он появляется внутри абзаца; и наконец, мы имеем дело с групповым селектором, составленным из двух селек- торов потомков. Первый селектор потомка применяется к тегу , находящемуся внутри тега , который располагается внутри тега . А второй применяет- ся к тегу , находящемуся внутри тега , который размещается внутри тега . Нам нужны оба этих селектора, потому что можно вложить теги внутрь тегов и наоборот. В результате может получиться такой код HTML: Hey! , I'm talking to you Одиночный селектор p strong em не будет работать для Hey!, поскольку это слово находится в теге , который располагается в теге ПРИМЕЧАНИЕ В HTML5 теги (для полужирного шрифта) и (для курсива) заняли свое прежнее место. Их можно использовать только для презентационных целей, когда нужно, чтобы текст был курсивным, но без добавления к его смыслу какой-нибудь реальной выразительности. Например, курсивом час- то пишут названия книг, поэтому в данном случае рекомендуется использовать тег : CSS3: The Missing Manual. 158 Часть 2. Применение CSS А при использовании тега текст будет акцентирован, что заставит программу чтения с экрана прочитать его громче, не так, как другой текст. В любом случае, если вы намерены применять теги и , не забудьте создать стили, использующие курсивный и полужирный варианты шрифта (волноваться об этом приходится только в том случае, если речь идет об Internet Explorer 8, для которого нужно обеспечить безопасный способ указания курсива, а первый рассмотренный ранее метод таких мер не предусматривает). Нужно также обратить внимание на необходимость установки во всех этих сти- лях значения normal для свойств font-weight и font-style . Если этого не сделать, многие браузеры (не только Internet Explorer) будут пытаться сделать жирнее по- лужирный шрифт и применить курсив к курсивной версии шрифта (особенно урод- ливо смотрится искусственно усиленный жирный шрифт в Firefox). Эта вторая технология поддержки полужирного и курсивного вариантов, несом- ненно, требует большого объема работы. Данный объем существенно возрастает, если на одном и том же сайте используется несколько шрифтов с полужирной и курсивной версиями. Какой из технологий следует воспользоваться, зависит от того, насколько важна для вас поддержка Internet Explorer 8. На момент написания данной книги Internet Explorer 8 все еще сохранял популярность, занимая от 13 ( http://gs.statcounter. com/#browser_versionww-monthly-201108-201208 ) до 25 % ( http://www.netmarketshare. com/browsermarket-share.aspx?qprid=2&qpcustomd=0&qptimeframe=M ) общего количества используемых веб-браузеров. ПРИМЕЧАНИЕ Для решения проблемы поддержки полужирных и курсивных вариантов шрифтов в Internet Explorer 8 можно применить другой подход. Попробуйте воспользоваться первым методом и посмотрите, как вы- глядят страницы в Internet Explorer 8. Некоторые шрифты, обычно из семейства sans-serif, не всегда выглядят так уж плохо, когда Internet Explorer применяет к ним искусственные методы придания полу- жирного и курсивного начертания. Может оказаться, что разница не так уж и заметна и можно восполь- зоваться первым методом, не испытывая при этом особых проблем. Следует также помнить, что рынок использования Internet Explorer 8 будет сужаться по мере приобретения пользователями новых компью- теров, перехода на Chrome или другие браузеры или же обновления операционных систем. Google web fonts Если инструкции по использованию веб-шрифтов, рассмотренные в предыдущем разделе, вам по каким-то причинам не подходят, есть более простой способ, хотя и с меньшим выбором шрифтов. В дополнение к таким службам, как поиск, карты, электронная почта, и множеству других предлагаемых сервисов компания Google предоставляет простую в применении службу веб-шрифтов. Вместо загрузки шрифтов, конвертирования их в нужные форматы, а затем размещения их на веб- сервере вы просто включаете одну ссылку на внешнюю таблицу стилей Google, показывающую, какой шрифт вы предпочитаете использовать. Сервер Google от- правляет нужные шрифты на веб-браузер посетителя без всякой путаницы и лиш- них действий с вашей стороны. Вам остается только найти требуемые шрифты на сайте Google web fonts, ско- пировать необходимый код (предоставляемый Google) и добавить его на свою веб- страницу, после чего создать CSS-стили, использующие данные шрифты. Сначала нужно посетить сайт Google web fonts, который находится по адресу www.google. com/webfonts (рис. 6.6). Глава 6. Форматирование текста 159 Рис. 6.6. На сайте Google web fonts перечислены шрифты, предлагаемые компанией Google У некоторых шрифтов есть несколько стилей, например полужирный, курсив, тонкий, ультратонкий и т. д. Для просмотра всех вариантов конкретного шрифта нужно щелкнуть на ссылке Show all styles (Показать все стили) на левой боковой панели (на рис. 6.6 она обведена овалом). Для каждого шрифта имеется также по три ссылки. Первая, Quick-use (Быстрое использование) (см. рис. 6.6, 1), загружает панель использования, которую мы рассмотрим далее. Она позволяет быстро добавить код, необходимый для применения данного шрифта. Ссылка Pop out (Показать в отдель- ном окне) (см. рис. 6.6, 2) открывает новое окно, в котором дается более подробная информация о шрифте, а также образец, показывающий каждую букву шрифта (хо- роший способ составить общее представление о внешнем виде шрифта и убедиться в присутствии всех необходимых вам символов, например редко используемых или знаков пунктуации). Ссылка Add to Collection (Добавить к коллекции) (см. рис. 6.6, 3) 160 Часть 2. Применение CSS приводит к добавлению шрифта в вашу коллекцию. (Если нужно использовать более одного шрифта, следует все шрифты добавить в коллекцию.) Поиск и выбор шрифтов Нужные шрифты выбираются путем создания коллекции. Вы просто находите понравившийся шрифт и щелкаете на кнопке Add to Collection (Добавить к коллек- ции) (см. рис. 6.6). Чтобы найти шрифт, можно спуститься вниз по главной стра- нице веб-шрифтов и просмотреть примеры доступных шрифтов. Однако на сайте более чем 500 шрифтов и поиск нужного шрифта может занять довольно продол- жительное время. Если вы уже представляете себе, как должен выглядеть искомый шрифт, например, он должен быть полужирным шрифтом без засечек, предназна- ченным для заголовков, воспользуйтесь вариантами фильтрации в левой части страницы (рис. 6.7). Поиск по имени. Если известно название интересующего вас шрифта, то его нужно просто набрать (или начать вводить его имя) в поле Search (Поиск) (см. рис. 6.7, 1). Установка фильтра по категории. Меню категорий (см. рис. 6.7, 2 ) позволяет показать шрифты, соответствующие одной, двум, трем или четырем категориям: Serif (с засечками), Sans Serif (без засечек), Display (демонстра ционные) и Handwriting (рукописные). Чтобы убрать ненужный тип шрифта, следует просто снять со- ответствующий флажок, а чтобы показать нужный тип, флажок следует уста- новить. Демонстрационные шрифты обычно бывают стильными и полужирны- ми. Они не подходят для длинных текстовых отрывков, но могут пригодиться для коротких заголовков, выделяющихся на странице. Рукописные шрифты создают иллюзию того, что текст кем-то написан с помощью пера. Они варьи- руются от элегантных, похожих на стиль, используемый для свадебных пригла- шений, до каракулей, которые применяются в записках с требованиями выкупа типа: «Заплатите, если хотите, чтобы я вернул вашего кота!» Выбор физического стиля. Физические характеристики шрифтов можно определить с помощью трех ползунков (см. рис. 6.7, 3). Ползунок толщины ( Thickness ) позволяет подобрать шрифты, составленные из линий от очень тонких (настолько тонких, что надписи трудно читаются) до очень толстых (полужирных и плотных). Ползунок наклона ( Slant ) определяет шрифты по степени из наклона: обычно это означает использование курсивных версий шрифтов, но также относится и к рукописным шрифтам, которые обычно имеют явный наклон вправо. Применение ползунка ширины ( Width ) дает воз- можность подобрать шрифты зауженного либо расширенного начертания. Используя более широкие шрифты, можно поместить на одну строку всего несколько символов, но зачастую это позволяет придать заголовку более вну- шительный вид. Выбор алфавита. Меню гарнитуры ( Script ) (см. рис. 6.7, 4) позволяет указать шрифты для использования с другими языками. Английский язык и многие европейские языки применяют латинский алфавит ( Latin ), но если нужен, на- пример, шрифт для русского текста, можно выбрать кириллический алфавит ( Cyrillic ). Укажите тот алфавит, который соответствует языку вашего текста. Глава 6. Форматирование текста 161 Рис. 6.7. Чтобы найти шрифты, соответствующие вашему дизайну, можно провести поиск по каталогу шрифтов Google или отфильтровать список шрифтов по различным критериям 162 Часть 2. Применение CSS Если воспользоваться сразу всеми фильтрами, можно столкнуться с ситуацией отсутствия каких-либо результатов. В таком случае следует щелкнуть на ссылке Reset all filters/search (Сбросить все фильтры и критерии поиска), обведенной на рис. 6.7 овалом, чтобы вернуться к полному списку веб-шрифтов Google. СОВЕТ Чтобы посмотреть демонстрацию некоторых самых лучших шрифтов от Google, зайдите на сайт http://hellohappy.org/beautiful-web-type/. Как только нужные шрифты будут найдены, можно будет щелкнуть на кнопке Add to Collection (Добавить к коллекции) (рис. 6.8, 1). Коллекция представляет собой некое подобие корзины покупателя, в которую можно добавлять и из которой мож- но удалять шрифты. Чтобы увидеть шрифты, добавленные в коллекцию, щелкните на раскрывающих стрелках (2). Шрифт можно удалить из коллекции, щелкнув на кнопке с крестиком справа от названия шрифта (3). Рис. 6.8. Работа с добавленными шрифтами Глава 6. Форматирование текста 163 Кнопка Review (Обзор), взятая на рис. 6.8 в овал, позволяет сравнивать шрифты в коллекции и извлекать более подробную информацию. Например, можно увидеть полный набор символов для каждого шрифта (то есть каждую букву и символ), про- тестировать шрифт, добавляя собственный текст и изменяя размер шрифта, и даже создать сравнение всех шрифтов в коллекции, наложив один на другой (если вам это действительно нужно). Использование шрифтов Google После создания коллекции шрифтов настанет черед извлечения кода, необходи- мого для их использования. 1. Щелкните в правом нижнем углу экрана Google Web Fonts (рис. 6.9, 1) на кноп- ке Use (Использовать). Откроется страница с настройками, а также с кодом, который нужно будет ско- пировать. 2. Выберите стиль, который нужно применить (см. рис. 6.9, 2). Некоторые шрифты включают курсивный, полужирный и другие варианты обычного шрифта. Для основного текста страницы обычно нужны как мини- мум обычный, курсивный и полужирный варианты. Для заголовков можно обойтись и одним вариантом шрифта. Вы, наверное, заметили спидометр в правой части страницы. По мере добавления новых стилей и шрифтов его указатель двигается по часовой стрелке, показывая, что загрузка шрифтов потребует больше времени. Это один из недостатков веб- шрифтов. Поскольку посетители вашего сайта вынуждены их загружать (наряду с веб-страницей, внешними таблицами стилей, графикой и другими элементами, составляющими страницу), нужно поступать разумно и не использовать слишком много шрифтов. В противном случае людям придется долго ждать, пока шрифты появятся на экране. Цифры на спидометре показывают среднее количество мил- лисекунд, затрачиваемых на загрузку файлов шрифтов. 3. Дополнительно ко всему остальному выберите тот набор символов, который вам нужен. Это действие можно и не выполнять, к тому же это доступно не для всех шриф- тов. Кроме того, при выборе набора символов, отличного от Latin (см. послед- ний пункт предыдущего маркированного списка), можно увидеть и другие варианты, кроме Latin и Latin Extended. Расширенный вариант Latin Extended пригодится в том случае, если текст содержит слова на языке, использующем символы с особыми метками, например на турецком, валлийском или венгер- ском. Для большинства языков, имеющих письменность на латинице, напри- мер для французского и испанского, достаточно будет алфавита из набора Latin. Если расширенный алфавит Latin не нужен, то его лучше не применять, чтобы не увеличивать размер файла и время загрузки шрифта. ПРИМЕЧАНИЕ Список дополнительных символов, доступных в Latin Extended, можно просмотреть по адресу http:// en.wikipedia.org/wiki/Latin_Extended-A. 4. Скопируйте код в поле Add this code to your website (Добавьте этот код к своему веб-сайту) (см. рис. 6.9, 3). 164 Часть 2. Применение CSS Есть три варианта. y Standard. Предоставляет тег , указывающий на внешнюю таблицу сти- лей (это то же самое, что и создание ссылки на любую внешнюю таблицу стилей). Но на самом деле это особая ссылка, указывающая на веб-сервер Google и предоставляющая информацию, которая необходима Google для доставки нужных шрифтов. Например: Обратите внимание, что в конце атрибута href перечисляются шрифты и их стили. В данном примере используются шрифты Codystar и Gentium. А Google загрузит несколько стилей: 300 и 400 для Codystar и 400 и 400italic для Gen- Codystar и 400 и 400italic для Gen- и 400 и 400italic для Gen- italic для Gen- для Gen- Gen- tium. Эти числа являются способом обозначения плотности (или толщины) шрифта (см. п. 6 данного списка). ПРИМЕЧАНИЕ Если используется HTML5, то часть "type='text/css'" тега можно опустить. В HTML5 она не нужна. y @import. Чтобы увидеть код, необходимый для использования директивы @import , нужно щелкнуть на вкладке @import (см. рис. 6.9, 3). Преимущество данной директивы заключается в том, что ее можно добавить в начало другой таблицы стилей. Предположим, например, что у вас есть одна таблица сти- лей, которая предназначена для вашего сайта и на которую ссылаются все его страницы. Стандартный метод требует добавления своего кода к каждой странице сайта. А используя директиву @import , можно добавить код к единственной внешней таблице стилей и закрыть вопрос. y JavaScript. В этой книге данный метод не рассматривается, поскольку он требует большого объема кода, и если вы не сильны в JavaScript, то вполне можете допустить ошибку. Кроме того, этот вариант не дает весомых пре- имуществ по сравнению с двумя другими. 5. Вставьте код в веб-страницы своего сайта. Если используется метод , рассмотренный в предыдущем пункте, код нуж- но вставить в каждую страницу, на которой вы собираетесь использовать шриф- ты. Если вы только приступили к процессу создания своего сайта, это сделать нетрудно, но если у вас уже много страниц, то придется потрудиться. В таком случае обратите внимание на метод @import : директиву @import можно поместить в верхней части внешней таблицы стилей вашего сайта, после чего все страницы, имеющие ссылку на эту таблицу стилей, также загрузят нужные шрифты. ПРИМЕЧАНИЕ Метод @import может оказать небольшое воздействие на производительность ваших веб-сайтов (то есть на скорость их работы). 6. Создайте стили, использующие шрифты. После того как шрифты загружены, их можно использовать практически так же, как и любой другой шрифт. Нужно просто создать стиль, добавить свойство Глава 6. Форматирование текста 165 font-family и указать шрифт. Имя шрифта показано в нижней части страницы использования сайта веб-шрифтов Google (см. рис. 6.9, 4). Если используется несколько стилей шрифта, нужно также добавить к стилю свой- ства font-weight и font-style . В Google обычные ключевые слова normal или bold для обозначения плотности шрифтов не используются. Вместо них применяется чис- ловая шкала от 100 до 900. Значение 700 соответствует варианту bold , 400 — вари- анту normal , а остальные числа обозначают другие варианты толщины. Предполо- жим, например, что вам нужно применить обычную курсивную версию шрифта Gentium Book Basic к тегу . Для этого можно создать следующий стиль: em { font-family: "Gentium Book Basic", serif; font-weight: 400; font-style: italic;} Рис. 6.9. Когда будете готовы к применению шрифтов Google, добавленных в вашу коллекцию, щелкните на кнопке Use (Использовать) в нижнем правом углу (1), на нужном вам стиле (2) и на методе, который хотите использовать для прикрепления этих шрифтов к странице. Наиболее распространенный метод заключается в создании ссылки на таблицу стилей, которая загрузит шрифты с серверов Google 166 Часть 2. Применение CSS ИНФОРМАЦИЯ ДЛЯ НОВИЧКОВ TypeKit как альтернатива Google Изза технических и правовых требований к исполь зованию вебшрифтов некоторые компании взяли на себя все связанные с этим трудности. И Google web fonts не единственный пример. Такие службы шрифтов позволяют выбирать из больших кол лекций шрифтов, находящихся на собственных веб серверах. Иными словами, вы не помещаете шрифты на свой сервер, а просто ссылаетесь на их серверы, используя либо фрагмент CSS, либо код JavaScript. Эти службы берут заботу по отправке нужных шрифтов браузерам ваших посетителей на себя (например, EOT для Internet Explorer 8 и более ранних версий). Коммерческая служба Adobe, которая называется TypeKit, также предоставляет широкий выбор шриф тов, но за плату. Поскольку эта служба является частью компании Adobe (которая вдобавок ко всему произво димому программному обеспечению занимается так же созданием шрифтов), вы получаете доступ к широ кому диапазону профессионально созданных шрифтов. С помощью TypeKit создаются отдельные наборы или коллекции шрифтов, которые назначаются вебсайту. Затем к каждой странице вашего сайта нужно добавить фрагмент кода JavaScript. Этот код устанавливает под ключение к серверам TypeKit и доставляет запрошен ные вами шрифты посетителям сайта. TypeKit является коммерческой службой, но она предлагает бесплатную пробную версию, имеющую некоторые ограничения. В зависимости от количества шрифтов, к которым нуж но получить доступ, и ежемесячного количества посе тителей вашего сайта конечная плата может составить от $24 до 99 в год. Придание тексту цветового оформления Черно-белые цвета хорошо смотрятся в фильмах Вуди Аллена, но когда мы имеем дело с текстом, шрифт небесно-синего цвета будет выглядеть намного более четко, изящно и стильно по сравнению с простым черным. Окрашивание текста веб-стра- ниц средствами CSS не представляет трудностей. Фактически мы уже использо- вали свойство color в предыдущих обучающих уроках. Существует несколько спо- собов определения конкретного цвета, но все они базируются на одном принципе: нужно указать само свойство color и затем его значение: color: #3E8988; В этом примере значение цвета представлено шестнадцатеричным числом, определяющим слабый оттенок зеленовато-голубого цвета (о шестнадцатеричных числах читайте далее). СОВЕТ Если вам требуется помощь по цветовому оформлению, можете найти множество согласованных коллекций цветов, а также полезных, связанных с ними ресурсов в Интернете по адресу www.co- lourlovers.com. Шестнадцатеричное представление цвета Самой старой системой задания цвета, используемой веб-дизайнерами, является шестнадцатеричная (Hexadecimal) нотация. Значение, например #6600FF , факти- чески содержит три шестнадцатеричных числа. В данном примере это 66, 00 и FF. Каждое число определяет уровень красного, зеленого и синего цветов соответ- ственно (как и в цветовой системе RGB, описываемой далее). Окончательное зна- чение цвета получается при смешивании этих трех составляющих. Глава 6. Форматирование текста 167 СОВЕТ Можете сокращать шестнадцатеричные числа до трех символов, если каждое из трех двухзначных чисел содержит по два одинаковых символа. Например, можно привести #6600FF к виду #60F или #FFFFFF к #FFF. RGB Можно также пользоваться методом кодирования RGB (Red — красный, Green — зеленый, Blue — синий), с которым вы, возможно, знакомы из программ компью- терной графики. Значение цвета кодируется тремя числами, представляющими процентные соотношения (0–100 %) или числа в диапазоне 0–255 для формиро- вания каждого оттенка (красный, зеленый, синий). Если вы хотите установить белый цвет текста (возможно, чтобы контрастно выделить его на темном фоне веб-страницы), можно использовать следующее свойство: color: rgb(100%,100%,100%); или color: rgb(255,255,255); СОВЕТ Вы всегда можете вернуться к классическим цветам HTML. Однако это будет минус в новизне и ори- гинальности вашего сайта. Существует 17 ключевых определений цветов: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow. В CSS их добавля- ют в стили следующим образом: color: fuchsia; и пр. Кроме того, большинство браузеров поддержи- вает 147 SVG-цветов (которые также называются цветами X11), поэтому, если вам действительно хочется что-то представить в более выгодном цвете, начните использовать такие цвета, как льня- ной, шоколадный, хаки и белый дым. Перечень этих цветов можно найти по адресу https://develo- per.mozilla.org/en-US/docs/CSS/color_value. RGBA Чтобы придать странице выразительность, стоит рассмотреть более современные методы задания цвета. RGBA означает Red — красный, Green — зеленый, Blue — синий, Alpha — степень смешивания с фоном. Этот способ задания цвета работает так же, как и RGB, но с добавлением альфа-канала. То есть можно задать уровень прозрачности, превратив цвет из сплошного в прозрачный (рис. 6.10). Для RGB- цветов добавляется еще одно число с диапазоном значений от 0 до 1. Значение 0 превращает цвет в невидимый, а 1 выводит цвет совершенно непрозрачным (то есть через него ничего нельзя увидеть): color: rgba(255, 100, 50, .5); Накладывая текст, цвет которого задан с помощью RGBA, на фоновые изображе- ния, можно создать интересные визуальные эффекты. Например, можно создавать изображения, немного просматриваемые через цвет текста (путем использования такого высокого значения, как .9 ) или сильно просматриваемые через него (путем применения такого низкого значения, как .1 ). RGBA-цвета можно использовать с любым CSS-свойством, применяющим значение цвета, например, как на рис. 6.10 — с цветом фона поля поиска в правом верхнем углу этого изображения или с цветом кнопок навигации: Home (Домой), Archives (Архивы), Authors (Авторы) и т. д. 168 Часть 2. Применение CSS Рис. 6.10. Применением RGBA-цветов СОВЕТ RGBA особенно хорошо работает со свойствами text-shadow и box-shadow, которые будут рассмот- рены далее. С помощью RGBA можно создавать более тонкие эффекты отбрасываемых теней, в ре- зультате чего основная часть фона становится видна сквозь тень. А в чем же недостатки этого метода? Internet Explorer 8 и более ранние версии не понимают RGBA-цветов. Один из выходов заключается в задании сначала не- прозрачного цвета с использованием шестнадцатеричной нотации, а затем второго свойства цвета с помощью RGBA-цветов: color: rgb(255,100,50); /* Для IE8 */ color: rgba(255,100,50,.5); /* Для более современных браузеров */ Первую строку интерпретируют все браузеры, а вторая строка отменяет первую, но только для тех браузеров, которые понимают, что такое RGBA-цвета. Иными словами, Internet Explorer 8 использует первое объявление цвета и игнорирует второе, а Internet Explorer 9 и другие браузеры применяют RGBA-цвета. Вы про сто не получите в Internet Explorer 8 эффекта прозрачности. Кроме того, эта техноло- гия не работает в Internet Explorer 7, который просто игнорирует обе строки и при- меняет черный цвет. К счастью, доля Internet Explorer 7 стремится к нулю, поэто- му, наверное, о нем не стоит волноваться. ПРИМЕЧАНИЕ Если требуется сохранить эффект прозрачности для Internet Explorer 7 и 8, можно сделать и так. Но для этого понадобится применить немного волшебства, присущего только Internet Explorer. Научиться тому, как это делается, можно на сайте http://css-tricks.com/rgba-browser-support. Глава 6. Форматирование текста 169 HSL и HSLA HSL означает Hue — тон, Saturation — насыщенность и Lightness — осветленность (иногда также используется термин Luminance — светимость). Это еще один способ задания цвета. Он не поддерживается Internet Explorer 8 или более ранними версия- ми, но работает во всех остальных браузерах. Если вы используете RGB- или Hex- цвета, то синтаксис HSL может показаться немного необычным. Так выглядит за- дание ярко-красного цвета: color: hsl(0, 100%, 50%); Внутри конструкции hsl( ) задаются три значения. Первое обозначает оттенок на круге оттенков и указывается в градусах от 0 до 360. Если вы помните очеред- ность следования цветов в радуге — красный, оранжевый, желтый, зеленый, голу- бой, синий и фиолетовый, — то поймете основную идею того значения, через ко- торое выражен цвет. Красный — 0 (а также 360, поскольку это один полный оборот круга), желтый — приблизительно 50, оранжевый — приблизительно 100, зеле- ный — 150 и т. д. Каждый цвет занимает примерно 51°. Вторым значением является насыщенность, то есть насколько чистым является цвет. Насыщенность можно указать в процентах от 0 до 100. Значение 0 % означа- ет полное отсутствие насыщенности, или тусклый серый оттенок. Фактически не- важно, какой тон указан, 0 % всегда даст один и тот же серый тон. Значение 100 % задает чистый цвет, яркий и живой. Третье значение определяет осветленность, указанную в процентах от 0 (пол- ностью черный) до 100 (полностью белый). Если нужно получить чистый цвет, следует воспользоваться значением 50 %. Предполагалось, что метод HSL будет более интуитивно понятен, чем RGB или десятичный, но, если вы считаете, что его трудно освоить, можете его не применять. Вместо этого воспользуйтесь такими программами, как Fireworks или Photoshop, или интерактивным средством выбора цвета, которые существенно упрощают вы- бор RGB- или Hex-значения. ПРИМЕЧАНИЕ Если вас заинтересовало использование HSL, то по адресу www.workwithcolor.com/hsl-color-schemer- 01.htm можно найти простое в использовании интерактивное средство выбора цвета. Точно так же, как у RGB есть сопутствующий формат RGBA, HSL поддержи- вает прозрачность с помощью формата HSLA. Он работает, как и ранее рассмот- ренный формат RGBA. Значение прозрачности указывается в диапазоне от 0 (не- видимый) до 1 (полностью непрозрачный). Следующее задание свойства приведет к созданию ярко-красного цвета с 50%-ной прозрачностью: color: hsla(0, 100%, 50%, .5); Примеры в данной книге больше ориентированы на применение RGBA, но если HSL вам более понятен, то используйте его. Установка размера шрифта Установка определеннного размера шрифта текста веб-страницы — хороший способ визуально придать тексту значимость и привлечь внимание посетителей к наиболее 170 Часть 2. Применение CSS важным фрагментам страницы. Заголовки, отображенные шрифтом большего раз- мера, привлекают внимание. В то же время информация, отображенная маленьким, возможно, подстрочным шрифтом, позволяет этому блоку не выделяться на фоне общего текста веб-страницы, создавая ненавязчивый комментарий. Свойство font-size устанавливает размер шрифта текста. За значением всегда должна следовать единица измерения величины. Например, так: font-size: 1em; Сочетание значения свойства и единицы измерения, которые указываются для установки размера шрифта (в данном примере 1em ), определяют размер текста. CSS предлагает большой выбор единиц измерения: предопределенные ключевые слова, em (стандартная единица измерения в типографской системе: размер буквы m, на- печатанной шрифтом Cicero), exs (то же самое, только берется размер буквы x), пикселы, проценты, пики, пункты, дюймы, сантиметры и миллиметры. Единицы измерения, обычно используемые в печати (пики, пункты, дюймы и т. д.), не очень удобно применять к веб-страницам, так как невозможно преду- гадать их вид на разных мониторах. Однако пункты удобно использовать при создании таблиц стилей для веб-страниц, ориентированных для печати на прин- тере. Только небольшую часть всех существующих единиц измерения — пикселы, ключевые слова, em, проценты — можно использовать для определения размеров шрифтов текста веб-страниц, отображаемых браузером на экране монитора. Далее рассказывается, как они работают. Пикселы Переменные для значений пикселов являются самыми легкими для понимания, поскольку не зависят от параметров настроек браузера. Когда вы определяете, на- пример, размер шрифта равным 36 пиксел для заголовка |