Книга css3 3е издание Серия Бестселлеры OReilly
 Скачать 20.28 Mb.
|
|
Поиск веб-шрифтов При выборе веб-шрифтов приходится сталкиваться с двумя проблемами: поиском таких шрифтов, которые вполне легально можно использовать во Всемирной сети, 146 Часть 2. Применение CSS и подбором шрифтов, представленных всеми форматами (EOT, WOFF, TrueType и т. д.). Хотя некоторые компании, создающие шрифты, стали предлагать веб-ли- цензии для приобретенных вами шрифтов, существует довольно широкий ассор- тимент бесплатных шрифтов, доступных для использования во Всемирной сети. Вот лишь некоторые из множества источников бесплатных веб-шрифтов. The League of Movable Type ( www.theleagueofmoveabletype.com ). Этот сайт, пред- ставленный группой дизайнеров, был одним из первых, который предложил сетевое использование бесплатных шрифтов ручной работы. Созданный ими шрифт League Gothic широко применяется в Сети. Exljbris Font Foundry ( www.exljbris.com ). Предоставляет классические бесплат- ные шрифты от Жоса Буйвенга: Museo, Museo Sans и Museo Slab. Fontex.org ( www.fontex.org ). Предоставляет широкий выбор бесплатных шриф- тов, хотя не все из них лицензированы для коммерческого использования. Если вы планируете применение одного из шрифтов на коммерческом сайте (то есть не только на своем персональном веб-сайте), обязательно прочитайте лицензи- онное соглашение, сопровождающее загружаемый шрифт. The Open Font Library ( http://openfontlibrary.org ). Доступно более 152 бесплат- ных шрифтов (на момент написания книги), и все они могут использоваться на ваших веб-сайтах (только не нужно применять сразу все 152 шрифта). Font Squirrel ( www.fontsquirrel.com ). Весьма примечательный сайт в мире веб-шриф- тов, предлагающий более 800 шрифтов. В дополнение к шрифтам Font Squirrel предоставляет то, что на этом сайте называется @font-face Kits и представляет собой коллекцию файлов, включающую шрифты во всех основных их форматах, и CSS- файл, который содержит весь необходимый @fontface -синтаксис для их загрузки (вскоре вы узнаете, как его использовать). Кроме того, Font Squirrel предлагает интерактивное средство для конвертирования шрифта TrueType или Open Type в другие форматы шрифтов, включая EOT, SVG и WOFF. Порядок использования этого средства будет рассмотрен в следующем разделе. Google Fonts ( www.google.com/webfonts ). Компания Google предоставляет про- стой и бесплатный способ включения веб-шрифтов в ваши сайты. Порядок ис- пользования этой службы будет подробно рассмотрен чуть позже. Создание нескольких форматов шрифтов Большинство сайтов, предлагающих бесплатные шрифты, предоставляют шрифт в единственном формате (обычно TrueType ( .ttf ) или Open Type ( .otf )). Но TrueType и Open Type некоторыми браузерами не поддерживаются. Кроме того, самый новый формат WOFF поддерживается большинством браузеров и его файлы меньше по размеру, чем файлы TrueType. Чтобы гарантировать предоставление шрифтов как можно большему количеству браузеров, нужно как минимум использовать шрифты форматов EOT, WOFF и TrueType. А если вы обслуживаете и уcтройства типа iPhone с Safari версии 4.1 или более ранних версий, вам нужны шрифты SVG. ПРИМЕЧАНИЕ Согласно сайту веб-статистики NetMarketShare, Safari 4.1 и более ранние версии представляют менее 2 % из всех мобильных веб-браузеров. Соответствующую статью можно найти по адресу www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=1. Глава 6. Форматирование текста 147 К счастью, Font Squirrel предоставляет очень полезное средство, помогающее генерировать требуемые форматы шрифтов. Генератор @font-face Generator явля- ется простым способом создания не только нужных шрифтов, но также и пробного HTML-файла и простой таблицы стилей CSS. Чтобы воспользоваться Font Squirrel @font-face Generator, выполните следующее. 1. Найдите шрифт TrueType (TTF) или Open Type (OTF). Воспользуйтесь одним из сайтов, перечисленных в предыдущем разделе, или найдите шрифт на другом сайте. Убедитесь, что этот шрифт лицензирован для использования в качестве веб-шрифта. Если он не лицензирован или вы не уве- рены в его лицензировании, пропустите этот шрифт и найдите другой. 2. Перейдите к генератору @font-face Generator на странице www.fontsquirrel.com/ fontface/generator Это простая страница, на которой находится всего лишь несколько настроек (рис. 6.5). Рис. 6.5. Пока вы не станете понимать смысл своих действий, придерживайтесь варианта настройки Font Squirrel Optimal (Оптимальный) 148 Часть 2. Применение CSS 3. Щелкните на кнопке Add Fonts (Добавить шрифты) (см. рис. 6.5, 1). Браузер откроет диалоговое окно Select files (Выберите файлы). 4. Выберите один или несколько шрифтов с вашего компьютера и щелкните на кнопке Open (Открыть). Браузер выложит файл или файлы на сервер Font Squirrel. 5. Выберите вариант преобразования (см. рис. 6.5, 2). y Basic (Основной) — просто преобразует шрифт в форматы EOT, WOFF и SVG. y Optimal (Оптимальный) — будет более удачным выбором, чем предыдущий вариант, поскольку он не только преобразует шрифт, но также совершит дру- гие действия по оптимизации для повышения производительности и скоро- сти работы со шрифтами. y Expert (Для опытных пользователей) — позволяет провести тонкую настрой- ку всех нюансов преобразования. Например, он позволит вам создать под- набор шрифта, то есть только выбранный набор символов. Иными словами, из шрифта можно исключить определенные неиспользуемые вами символы, например точку с запятой, восклицательный знак или букву Q. По всей вероятности, вам потребуется доступ ко всем символам, поэтому лучше остановить выбор на варианте Optimal (Оптимальный). 6. Установите флажок Yes, the fonts I'm uploading are legally eligible for web embedding (Да, выкладываемые шрифты вполне подходят для легального встраивания в веб-контент) (см. рис. 6.5, 3). Как уже упоминалось, шрифты являются интеллектуальной собственностью, и простое выкладывание их на веб-сервер способствует пиратству в области использования программного обеспечения. Убедитесь в том, что ваши шрифты могут применяться в Сети и относятся к тому большинству, которое перечис- лено в данном разделе. 7. Щелкните на кнопке Download Your Kit (Скачайте свой комплект) (см. рис. 6.5, 4). В зависимости от количества конвертируемых шрифтов и их сложности про- цесс загрузки может занять некоторое время. Серверу Font Squirrel нужно по- лучить шрифт и совершить над ним свои загадочные действия для генерации каждого формата шрифта. Как только все будет готово, вы скачаете папку, со- держащую файлы различных форматов шрифтов, демофайл, CSS-файл и не- сколько других файлов разного назначения. Наиболее важными, конечно же, являются файлы шрифтов с расширениями EOT, TTF, WOFF и SVG. Чтобы применить полученные шрифты в деле, нужно использовать их с CSS- директивой @font-face При выборе варианта настройки Optimal (Оптимальный) будут сгенерированы все необходимые форматы шрифтов и выполнены другие настройки, чтобы шриф- ты быстрее загружались и лучше выглядели на экране. Но для полного контроля процесса выберите вариант Expert (Для опытных пользователей). Вы увидите око- ло десяти настроек, которыми можно воспользоваться для изменения порядка со- здания шрифтов. Глава 6. Форматирование текста 149 Использование директивы @font-face После загрузки нужных файлов шрифтов их можно будет использовать. Сначала скопируйте файлы в то место на компьютере, где хранятся файлы для вашего веб- сайта. Многие веб-разработчики создают для этого специальную папку в корневом каталоге сайта, которая называется fonts , _fonts или webfonts . В качестве альтерна- тивы, если у вас есть папка для ваших CSS-файлов, вы можете поместить файлы шрифтов в эту папку. В принципе, неважно, куда вы положите данные файлы на вашем сайте, но это поможет навести в нем порядок. Секретом веб-шрифтов является CSS-команда под названием «директива» @font-face . Она называет шрифт и сообщает браузеру, где найти файл шрифта для его загрузки. Директива @font-face помещается в вашу таблицу стилей как обыч- ный стиль. Предположим, например, что вы используете шрифт League Gothic. У вас на сайте в папке fonts есть файл True Type по имени League_Gothic-webfont.ttf Нужно заставить браузер загрузить этот шрифт путем добавления директивы @ font-face к вашей таблице стилей: @font-face { font-family: "League Gothic"; src: url('fonts/League_Gothic-webfont.ttf'); } Первое свойство, font-family , вы уже видели, но здесь у него другое назначение. При использовании внутри директивы @font-face свойство font-family присва- ивает шрифту имя. Затем имя этого шрифта задействуется, когда данный шрифт нужно применить к стилю. Предположим, например, что требуется использовать шрифт League Gothic для всех абзацев на странице. Затем можно будет восполь- зоваться следующим стилем: p { font-family: "League Gothic"; } ПРИМЕЧАНИЕ Для каждого шрифта, который нужно использовать, применяется одна директива @font-face. Если у вас используются три шрифта, понадобятся три директивы @font-face. Лучше всего хранить их сгруппированными и помещать в верхнюю часть вашей таблицы стилей, чтобы браузер сразу же мог начать их загрузку. Второй атрибут, свойство src , сообщает браузеру, где искать файл шрифта на сервере. Путь из таблицы стилей к файлу шрифта на системе помещается внутри кавычек и внутри функции url( ) . Путь работает точно так же, как и все другие пути к файлам HTML, например пути к изображениям, ссылкам и файлам JavaScript. Предположим, допустим, что у вас есть таблица стилей в папке по имени _styles и есть файл шрифта по имени my_font.ttf в папке по имени _fonts . Обе папки нахо- дятся в корневом каталоге вашего сайта. Следовательно, путь от таблицы стилей к файлу шрифта будет ../_fonts/my_font.ttf . И тогда для этого шрифта нужно будет написать следующую директиву @font-face : @font-face { 150 Часть 2. Применение CSS font-family: "My Font"; src: url('../_fonts/my_font.ttf'); } Возможно, вы заметили, что в приведенном выше примере фигурирует только один файл шрифта формата TrueType. Перед тем как углубиться в подробности, скажу, что это упрощает демонстрацию общего принципа работы @font-face . Как уже говорилось, директива @font-face позволяет указать несколько файлов с раз- личными типами шрифтов. К сожалению, из-за недостатков, свойственных брау- зерам, синтаксис их всех немного усложнен. Предположим, например, что на сай- те нужно использовать все разновидности форматов шрифта League Gothic. Тогда показанный выше код нужно переписать следующим образом: @font-face { font-family: 'League Gothic'; src: url('fonts/League_Gothic-webfont.eot'); src: url('fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/League_Gothic-webfont.woof') format('woff'), url('fonts/League_Gothic-webfont.ttf') format('truetype'), url('fonts/League_Gothic-webfont.svg') format('svg'); } Это выглядит как какое-то нагромождение, и, к сожалению, из-за недостатка браузера Internet Explorer код неоправданно усложнен. Давайте в нем разберемся. Строка 2 сохранила свой прежний вид. Свойство font-family предоставляет имя шрифта, это то же самое имя, которое вы будете использовать, применяя шрифт к своим CSS-стилям. Строка 3 предназначена для Internet Explorer 9, но только при его работе в режи- ме совместимости (Compatibility mode), то есть в режиме, когда Internet Explorer 9 работает наподобие Internet Explorer 8. Это странное свойство было добавлено в Internet Explorer 9, чтобы веб-сайты, приспособленные под недостатки Internet Explorer 8 и более ранних версий, неплохо выглядели в Internet Explorer 9. Поль- зователь должен преднамеренно переключиться в режим совместимости в Internet Explorer 9, поэтому лучше, наверное, оставить эту настройку в покое. Строка 4 начинается со второго свойства src , которое в соответствии с правила- ми директивы @font-face может иметь указания на несколько шрифтов. Первым опять указан шрифт EOT, но на этот раз вы видите, что к окончанию расширения файла .eot нужно добавить строку ?#iefix . Это сделано, чтобы приспособиться к дополнительным недостаткам Internet Explorer, на этот раз дело касается Internet Explorer 6–8. Если после .eot не будет этой небольшой добавки к URL, то шрифт может неправильно отобразиться в Internet Explorer 8 или в более ранних версиях. После URL можно также заметить новый фрагмент кода: format('embedded-opentype') Он показывает формат шрифта и добавляется после каждого URL для различ- ных форматов шрифтов. Глава 6. Форматирование текста 151 Строки 5–7 просто определяют дополнительные форматы шрифтов. Указано всего одно свойство — src , разбитое на несколько строк, чтобы его было легче читать. Для каждого типа шрифта, заданного в свойстве src , добавляется URL, формат и запятая (для всех, за исключением последнего шрифта): url('fonts/League_Gothic-webfont.woof') format('woff'), ПРИМЕЧАНИЕ В конце списка файлов для свойства src добавляется точка с запятой, чтобы обозначить конец свойства src (строка 7 в показанном выше примере). Об этой завершающей точке с запятой забы- вать нельзя, иначе директива @font-face не будет работать. Даже если браузер способен понимать различные типы шрифтов (например, Chrome может использовать шрифты WOFF, TrueType и SVG), он не станет загружать все файлы шрифтов. Вместо этого по мере чтения списка типов шриф- тов браузер загружает только первый шрифт, который ему понятен. Иначе гово- ря, если браузеру Chrome попадется показанный выше код, он пропустит файл с расширением EOT, поскольку этот формат шрифта ему непонятен, а загрузит файл с расширением WOOF. Затем он целиком пропустит файлы с форматами TrueType и SVG. Из этого следует, что порядок, в котором перечислены шриф- ты, играет важную роль. Формат WOOF в большинстве случаев более предпоч- тителен, поскольку его файлы меньше по размеру и загружаются быстрее, а фор- мат SVG намного больше по размеру, поэтому нужно убедиться, что шрифты перечислены в следующем порядке: EOT, WOOF, TTF и SVG. ПРИМЕЧАНИЕ Показанный выше синтаксис @font-face стал результатом многочисленных тестирований и изысканий многих талантливых веб-профессионалов. Об эволюциях этого синтаксиса можно прочитать в сле- дующих публикациях в блогах: http://www.fontspring.com/blog/further-hardening-of-the-bulletproof- syntax и http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/. Создание стилей с использованием веб-шрифтов Самой сложной частью использования веб-шрифтов является получение файлов шрифтов в нужном формате и настройка директивы @font-face . После того как все это будет готово, веб-шрифты используются точно так же, как и рассмотренные ранее шрифты, предустановленные в системе. Иначе говоря, при создании нового стиля просто применяется свойство font-family и предоставляется имя для шриф- та, которое задействовалось в директиве @font-face . Например, в предыдущем коде в директиве @font-face новый шрифт был назван League Gothic (строка 2). Это имя и нужно использовать, применяя этот шрифт к стилю. Чтобы в содержимом всех тегов h1 применялся шрифт League Gothic, можно создать следующий стиль: h1 { font-family: 'League Gothic'; font-weight: normal; } Обратите внимание на употребленное здесь новое свойство font-weight . Обычно браузеры отображают содержимое тегов полужирным шрифтом. Большинство 152 Часть 2. Применение CSS браузеров искусственно сделают шрифт полужирным, когда требуется такая версия шрифта. В результате получается уродливое полужирное начертание. Установка для свойства font-weight значения normal заставляет браузер просто использовать шрифт League Gothic таким, какой он есть, и избежать попыток сделать его полу- жирным. Более подробно работа с полужирными и курсивными вариантами при- менительно к веб-шрифтам будет рассмотрена в следующем разделе. Было бы неплохо также включить список резервных предустановленных шриф- тов на тот случай, если браузер не сможет загрузить веб-шрифт. Здесь можно вос- пользоваться ранее рассмотренной технологией. Например: h1 { font-family: 'League Gothic', Arial, sans-serif; font-weight: normal; } СОВЕТ На веб-странице можно также использовать шрифты, содержащие различные символы и значки. То есть вместо создания, например, графического изображения предупреждающего значка и поме- щения его в тексте абзаца можно воспользоваться директивой @font-face для загрузки шрифта, содержащего значок предупреждающего знака, и применить обыкновенную букву (отображенную в этом шрифте как значок). Для использования шрифтов, содержащих различные значки, можно обратиться к нескольким ресурсам: http://css-tricks.com/flat-icons-icon-fonts/, http://css-tricks.com/ html-for-icon-font-usage/ и http://css-tricks.com/examples/IconFont/. Работа с полужирными и курсивными вариантами Обычные шрифты, установленные на компьютере, включают варианты стиля и плот- ности, поэтому при применении в HTLM тега веб-браузер использует по- лужирную версию такого шрифта, а при применении к тексту тега браузер использует курсивную версию такого шрифта. Если задействовать эти два тега в со- четании, то вы увидите полужирную курсивную версию шрифта. Это совершенно другие шрифты, содержащиеся в других файлах шрифтов. При исходном способе использования шрифтов на веб-страницах (который был рассмотрен ранее) вам не нужно волноваться насчет этих других шрифтов, потому что браузер воспользуется правильной версией автоматически. А вот в случае с веб-шрифтами для каждого варианта шрифта вам понадобится отдельный файл. Итак, для основного текста веб-страницы нужны как минимум обычная версия шрифта, полужирная версия, курсивная версия и комбинированная полужирная и курсивная версия. И об этом нужно помнить при подборе шрифта для своего сайта, поскольку у некоторых шрифтов есть только версия с одним вариантом плотности и нет курсивной версии. Такой шрифт пригодится для заголовка, но при- менять его для длинных текстовых абзацев, где, скорее всего, будут встречаться фраг- менты в полужирном и курсивном оформлении, нет никакого смысла. Кроме того, для каждого варианта шрифта вы должны создать отдельную директиву @font-face При работе с курсивными и полужирными версиями веб-шрифтов есть два варианта на выбор. Один из них проще реализовать, но он не работает в Internet Explorer 8 или более ранней версии (или в Internet Explorer 9 в режиме совмести- мости), другой требует больших трудозатрат, но функционирует и на старых вер- сиях Internet Explorer. |