Каждый веб-дизайнер мечтает о создании сайта с красивой типографикой. Но, к сожалению, браузеры поддерживают лишь несколько гарнитур, так называемых «безопасных для веб» шрифтов. В стандартный набор входят следующие шрифты: Arial , Verdana , Times , Georgia , Courier New и несколько других.
Гарнитура определяет набор из одного или более шрифтов, каждый из которых состоит из символов, имеющих общие конструктивные особенности — вес, стиль, дизайн, начертание, плотность, размер, например, шрифты без засечек (или гротески), шрифты с засечками (антиква). Гарнитура состоит из набора знаков (цифры, буквы, знаки пунктуации, специальные символы, также может состоять из неалфавитных символов).
Шрифт — это набор символов конкретного размера, веса и стиля. Например, шрифт Times New Roman стиль italic размера 16px — это один шрифт, а Times New Roman стиль italic размера 10px — это уже другой.
Правило @font-face позволяет подключать разнообразные пользовательские шрифты. Браузер загружает шрифты в кэш и использует их для оформления текста на странице. Такой подход называется встраиванием шрифтов , а встроенные шрифты - веб-шрифтами .
Правило @font-face нужно размещать перед всеми остальными правилами css, так как этот прием улучшит производительность страницы. Загружаемые шрифты можно помещать в специальную папку fonts , созданную на сервере.
Чтобы подключить шрифт с помощью правила @font-face , нужно:
1) загрузить файл шрифта на сервер в нескольких форматах для поддержки всеми браузерами,
2) указать название шрифта, прописать ссылку на файл и задать описание шрифта,
3) добавить имя шрифта в свойство font-family элемента, который будет отображаться данным шрифтом.
@font-face { font-family: "WebFont"; src: url(WebFont.eot?) format("eot"), /* IE8+, знак? позволяет обойти баг в обработчике значения src */ url(WebFont.woff) format("woff"), /* все современные браузеры, IE9+ */ url(WebFont.ttf) format("truetype"); /* все современные браузеры */ } p {font-family: "WebFont", Arial, sans-serif; }
Этот код говорит браузеру отображать текст внутри элемента
Используя шрифт WebFont. Если браузер по какой-либо причине не сможет загрузить данный шрифт, он выберет подходящий из списка шрифтов. Он перебирает их в указанном порядке до тех пор, пока не находит шрифт, который сможет успешно использовать.
Внутри каждого семейства шрифта можно определить до девяти значений жирности (веса). Поэтому для каждого встраиваемого шрифта, а также для каждого начертания нужно задавать отдельное правило @font-face , т.е. нельзя объявить в одном правиле два разных шрифта или шрифт одного семейства, но разных стилей и веса.
@font-face { font-family: "WebFont"; src: url(WebFont.eot?) format("eot"), url(WebFont.woff) format("woff"), url(WebFont.ttf) format("truetype"); font-weight: bold; font-style: italic; } @font-face { font-family: "WebFont"; src: url(WebFont.eot?) format("eot"), url(WebFont.woff) format("woff"), url(WebFont.ttf) format("truetype"); font-weight: 400; font-style: normal; }
В общем виде для шрифта можно задать следующие свойства:
@font-face { font-family: "FontName"; src: url() format(" "); font-variant: ; font-stretch: ; font-weight: ; font-style: ; }
Если вы предполагаете, что на компьютере пользователя установлен данный шрифт и хотите, чтобы шрифт загружался только после проверки его наличия у пользователя, то можно воспользоваться значением local() для задания адреса:
@font-face { font-family: "WebFont"; src: local("WebFont"), url(WebFont.eot?) format("eot"), url(WebFont.woff) format("woff"), url(WebFont.ttf) format("truetype"); font-weight: bold; font-style: italic; }
Форматы веб-шрифтов
Свойство @font-face имеет хорошую поддержку в браузерах, но разные браузеры используют разные форматы шрифтов. Существуют четыре основных формата шрифтов:
Формат WOFF (Web Open Font Format), открытый сетевой формат шрифта, разработанный в Mozilla. Технически WOFF нельзя назвать форматом шрифта, так как он представляет собой лишь оболочку с функцией сжатия. Формат сжимает шрифты в формате TTF/OTF для использования их в интернете. Также, WOFF позволяет добавлять к файлу метаданные, например, сведения о лицензии.
Форматы OTF/TTF (OpenType Font и TrueType Font) работают в большинстве браузеров. Оба формата распространяются свободно.
Формат EOT (Embedded Open Type) создан разработчиками Microsoft, представляет сжатую копию шрифта TTF, повторное использование которого запрещается технологиями DRM (Digital Rights Management, цифровое управление правами доступа). Поддерживается только в IE, начиная с 8-й версии.
SVG/SVGZ (Scalabe Vector Graphics) — тип файлов шрифтов, представляющий векторное начертание шрифта. Как правило, имеет меньшие размеры файлов, тем самым позволяя улучшить производительность на мобильных устройствах. Работает в Opera Mobile и iOS Safari.
Сложности использования встроенных шрифтов
1) Файлы шрифтов могут быть больших размеров, поэтому в некоторых случаях добавление @font-face замедляет загрузку страниц.
2) С некоторыми шрифтами связаны лицензионные ограничения, не допускающие бесплатного использования.
3) Некоторые шрифты просто плохо смотрятся на веб-страницах.
В своей предыдущей статье « » я сделал обзор двух самых популярных сервисов для встраивания шрифтов в вёрстку, а также обещал в следующей статьей раскрыть секреты его использования.
Предположим, что дизайнер использовал в своём макете очень модный, самый популярный вывесочно-заголовочный шрифт MyriadPro от Adobe. В Google WebFonts его нет, хотя бы потому, что Adobe не сделала его свободным.
Но задача стоит, и теперь к делу. Вы задумались о том, как встроить в вёрстку MyriadPro .
Идём сюда и видим следующую картину:
Добавляем свой шрифт или шрифты (у нас это будет Myriad Pro Regular) и выбираем режим «Expert». Можем выбрать форматы шрифтов — рекомендую оставить всё, как есть — это работает, по крайней мере, на всех современных версиях браузеров. Старая Opera (двухгодичной давности) работала, если я не ошибаюсь, с SVG, но там был ужасный рендеринг и без какого-либо сглаживания.
Выбираем Custom Subsetting. Это нужно для того, чтобы выбрать именно те диапазоны символов (сиречь, символы языка), которые нам нужны. А нужны нам, скорее всего, «English», «Cyrillic», ну и иногда я добавляю «Deutch». Также я добавляю то, что на скриншоте - в действительности никогда не знаешь, какие ещё символы смогут понадобиться, а повторять эту процедуру по второму разу (вместе с интеграцией) не особенно хочется.
Кириллица есть? Прекрасно. Переходим к следующему шагу:
Мы можем встроить свои шрифты прямо в CSS при помощи Base64 Encode (все современные браузеры поддерживают этот финт ушами). Это позитивным образом скажется на снижении нагрузки на сервер (уменьшится количество обращений к нему), а также на скорости загрузки страниц.
Также можно изменить имя получаемой CSS и добавить ещё всяких опций, раздувающих размер файла и на практике не особо нужных.
Остальное не трогаем — оно того не стоит.
Лжём о том, что этот шрифт невозбранно разрешается использовать в интернете (а на самом деле — только в макетах.PSD, судя по EULA Adobe) и получаем zip-файлик.
В нём мы увидим файл «имяшрифта-demo.html» — открываем и видим красивую табличку со своими шрифтами. Для проверки нашей кириллицы переходим на «Glyphs & Languages», пролистываем ближе к концу страницы.
Проверяем во всех современных браузерах: Chrome, Firefox, Internet Explorer 9, Opera и Safari. Кириллица есть? Прекрасно.
Ну а теперь встроим всё это дело к нам в CSS (см. в файле stylesheet.css), и скопируем к нам в папку файлы шрифтов — на всякий случай:
А теперь смотрим результат:
Работает. Всё очень просто и красиво.
Небольшой рассказ о том, как корректно генерировать font для рунета. В центре внимания известный уже на Хабре буржуйский сервис fontsquirrel .
Если красота должна спасти мир, то дизайнеры web интерфейсов - это армия зла. Ни поймите меня не верно, сам считаю себе web дизайнером, и не могу перенести криворуких верстальщиков, приходится верстать свои же psd-изыскания, такими же кривыми руками. И тут начинается самое интересно…
Как все на практике:
1. Первым делом все упирается в выбор нужного шрифтового стека для рунета, и если бы не это , то пришлось держать в уме. Выбрав нужный стек скармливаем его body, примерно так:
Body{
font-family: "Arial Black", "Helvetica CY", "Nimbus Sans L" sans-serif;
font-size:12px;
}
На выходе получаем базовый шрифт, приближенный к тому, что мы используем в нашем дизайн макете. Отлично!
2. Довольные своей оперативностью внимательно смотрим дизайн-макет работы и местами (то ли в меню, то ли в футере) видим популярный, практически у всех полиграфистов: Myriad Pro, Arial Narrow или еще какой-нибудь Europe из StarCraft. Сразу в голову приходят три варианта: заменить картинками, поставить JS (ага, тот самый который cufon) ну или в очередной раз прикоснуться к CSS свойству @font-face . Да, мысль отказаться от исчадия вселенского масштаба и использовать безопасный стек повсеместно у нас конечно же не возникает - мы, что называется, «воплощаем» красоту в жизнь.
Первый вариант, пришедший на ум - заменить все на png - мы откидываем сразу, так делали наши прадеды еще на заре палеолита;
Второй вариант (cufon.js) не устраивает нашего заказчика, дай Бог ему здоровья - нашелся на земле один трезвомыслящий клиент; - поэтому переходим к пункту три.
3. Выискиваем из недр Windows 7 нужный нам шрифт по такому следу: «Пуск → Панель управления → Шрифты», копируем в локальную папку на компе с проектом и открываем font генератор fontsquirrel . В моем случае - MyriadProCondensed.
На удачу кликаем по кнопкам и получаем готовое css свойство из серии:
@font-face {
font-family: "MyriadProCondensed";
src: url("myriadpro_cond-webfont.eot");
src: url("myriadpro_cond-webfont.eot?#iefix") format("embedded-opentype"),
url("myriadpro_cond-webfont.woff") format("woff"),
url("myriadpro_cond-webfont.ttf") format("truetype"),
url("myriadpro_cond-webfont.svg#MyriadProCondensed") format("svg");
font-weight: normal;
font-style: normal;
}
Также получаем в архиве для скачки пример того, как будет выглядеть наш шрифт в браузерах. И все бы ничего, но полученный результат не работает так, как нам надо. И вроде же поставили EXPERT… в настройках, и даже по выбирали какие-то галочки - но все равно эффекта нет - русские буквы не хотят становится MyriadProCondensed.
Я гуглил два дня, первым делом открыл Хабр, откуда собственно и узнал о сервисе, спасибо , ничего не нашел по этому вопросу и продолжил «гуглить» настроение. Спустя два дня настроение появилось и начал разбирать сервис www.fontsquirrel.com по полочкам, а именно искать там локализацию кириллицы.
4. Нашел! Всего то надо было поставить «радиобатон» в Subsetting на позицию Custom Subsetting . В выпавшем содержание сета установить галочку Language на позиции Cyrillic .
5. Ура заработало. Идем пить кофеёк. Все спасибо за терпение.
P.S. Переубеждать вас делать верстку/интерфейс безопасными стеками, даже не буду. Пусть это будет на нашей совести, но знаю одно, пока эта шрифтомания существует - мир медленно, но уверено катится в пропасть. Ничего красивого в том, что шрифт с экрана монитора невозможно прочитать - нет!
Сегодня же я хочу рассказать о свойстве CSS @font-face , с помощью которого легче и удобнее всего использовать произвольный шрифт на сайте. Но есть одно «но», которое предстоит решить — разные браузеры требуют разные форматы шрифтовых файлов.
Введение
По данным статистики на данный момент минимум 92% десктопных браузеров правильно работают с @font-face . Делается все просто: называем шрифт, указывает путь до него, используем его прямо в CSS:
// Объявляем шрифт
@font-face {
font-family: "Имя шрифта";
src: url("путь/до/него");
}
// Применяем шрифт
p {
font-family: "Имя шрифта", Arial;
}
Здесь в src: url указывается путь до файла со шрифтом, в src: local — название шрифта на локальной машине на тот случай, если у юзера этот шрифт уже есть. Но, не все так просто, разным браузерам нужны разные форматы шрифтов.
Форматы шрифтов
Шрифты могут быть в форматах TTF , OTF , EOT , SVG и WOFF :
- Internet Explorer (все версии) — EOT;
- Firefox (начиная с 3.5) — TTF/OTF (WOFF добавлен с версии 3.6);
- Opera (начиная с 10) — TTF/OTF;
- Chrome (все версии) — SVG (TTF/OTF добавлены в конце января 2010-го);
- Safari (начиная с 3.2) — TTF/OTF.
Как видим, у нас есть минимум четыре типа файлов, которые нужно подгружать.
Правильное использование
Для того, чтобы каждый раз не тратить кучу времени на создание нескольких шрифтовых файлов и разного синтаксиса подключения, хорошие люди сделали сервис — Шрифтовая белка . Заходим, загружаем шрифт, получаем архив с примером использования и необходимыми типами файлов.
Теперь можно проверить, что все везде работает как надо. Предлагаю ради интереса посмотреть на то, как же выглядит кросс-браузерный @font-face:
@font-face {
font-family: "TheanoDidotRegular";
src: url("theanodidot-regular-webfont.eot");
src: local("☺"),
url("theanodidot-regular-webfont.woff") format("woff"),
url("theanodidot-regular-webfont.ttf") format("truetype"),
url("theanodidot-regular-webfont.svg#webfontE40g3tc3") format("svg");
font-weight: normal;
font-style: normal;
}
На этом все. Не злоупотребляйте различными шрифтами;-)
Возможность встраивания любых шрифтов, которые вам нравятся на веб-сайты посредством @font-face, является дополнительным стилистическим приёмом, который предназначен для устранения монотонности обычных системных шрифтов. Это, безусловно, было бы слишком просто и скудно, если бы все пользовались только одним шрифтом. В этой статье мы поговорим как раз об этом.
Это краткое введение в @font-face позволит вам вникнуть в тему интеграции шрифтов посредством @font-face. Если вы хотите использовать какие-то особенные шрифты, то как раз тут вы поймёте, как их интегрировать на вашем сервере. В этой статье мы попытаемся перечислить всевозможные полезны сведения, которые касаются данной темы.
Форматы Web шрифтов
EOT, TTF, OTF, CFF, AFM, LWFN, FFIL, FON, PFM, PFB, WOFF, SVG, STD, PRO, XSF, и это далеко не всё. Наверное легче найти путь из джунглей, чем шрифт, который вам 100% подойдёт. Давайте взглянем на плюсы и минусы интеграции шрифтов.
TrueType
Этот формат был создан в далёком 1980 году в конкурсе Adobe’s Type 1 для PostScript. Этот формат, основанный на новых технологиях, заменил множество других, которые использовались к этому времени. Microsoft начал использовать формат TrueType, и вскоре он стал стандартным системным шрифтом.
OpenType
Когда-то давно Microsoft и Adobe объединились, чтобы создать данный формат. Как ни странно, но он основан на формате TrueType, но в него встроены дополнительные элементы, такие как лигатуры, контекстные символы и т.д. Однако многие браузеры до сих пор не поддерживают данный формат. Существует две разные версии формата OpenType, основанные на разных технологиях. Если поподробнее то вот:
- OpenType с контурами TrueType (OpenType TT) и
- OpenType с контурами PostScript (OpenType PS)
Шрифты, основанные на формате TrueType больше подходят для Web, и будет вообще клёво, если Microsoft решит все проблемы связанные с отображением. Структуры шрифтов TrueType и OpenType fonts очень схожи и поддерживаются в Safari 3.1 и выше, Firefox 3.5 и Opera 10 (и в новых версиях).
EOT
Internet Explorer поддерживает формат (EOT) начиная с 1990 года. В отличии от форматов TrueType и OpenType, он предоставляет следующие возможности:
- Шрифты EOT более компактны, чем OpenType, что является значительным преимуществом для Web.
- Шрифты EOT могут использоваться только в пределах домена. Это очень удобная вещь, т.к. помогает бороться за лицензированные права на шрифты.
Если вы хотите сконвертировать шрифт TTF в файл EOT, то можете воспользоваться инструментом EOTFast (бесплатный), доступный только для пользователей Windows.
WOFF
На самом деле формат WOFF это новое скрещивание форматов TrueType и OpenType, что по сути не делает его новым.
WOFF использует алгоритм, который называется zlib, что позволяет значительно уменьшить вес файла, примерно на 40%. Более того, в этот шрифт можно добавлять мета данные, такие как лицензию и т.д. Однако такие данные не могут валидироваться браузерами.
Данный формат поддерживается браузером Firefox, начиная с версии 3.6, и Google Chrome, начиная с версии 5.0. Все остальные браузеры на данный момент производят все необходимые изменения для поддержки данного формата.
SVG
SVG шрифты содержат символические знаки в качестве стандартных SVG элементов и атрибутов, и представлены в качестве векторных изображений. Но как ни странно, это одна из слабых сторон данного формата. В то время как EOT, WOFF, PostScript и OpenType могут быть сжаты, данная операция не может быть применена к шрифтам формата SVG.
SVG шрифты - это не очень хорошая альтернатива для Web шрифтов, и iOS 4.2 - это первая версия Mobile Safari, которая поддерживает данный формат. Однако, данный формат является единственным, который вы можете использовать для iPhone и iPad, которые работают на iOS 4.2.
Встраивание шрифтов с вашего сервера
Для того чтобы использовать тот или иной шрифт в вашем дизайне, вам не обязательно иметь лицензию. Вы можете использовать уже лицензированные шрифты из ваших приложений и запихнуть их на ваш Web сервер.
Этому шрифту - да, этому - нет
Перед тем, как начать массово конвертировать обычные шрифты в веб шрифты, постарайтесь определить, можете ли вы это сделать согласно лицензионному соглашению. В общем случае, коммерческая лицензия не позволяет использовать шрифты из различных программ в каком-то другом месте. Таким образом, вы не сможете воспользоваться правилом @font-face.
В то же время, существует огромное количество шрифтов и сервисов специально для Web. Вы можете так же лицензировать свои собственные шрифты на сайте MyFonts.com .
Пока формат WOFF станет официальным стандартом, вы можете пользоваться данными техниками и сервисами, как многие другие разработчики.
Встраивание бесплатных шрифтов
К счастью, в интернете вы можете найти целую кучу бесплатных шрифтов, которые вы можете использовать для ваших сайтов. Список шрифтов, которые вы можете смело внедрить, можете найти на сайте webfonts.info .
Ещё одна огромнейшая коллекция находится на ресурсе Font Squirrel . Тут вы можете скачать целый набор шрифтов, которые в последствии необходимо будет сконвертировать благодаря @font-face Kit Generator .
Перед тем как скачать шрифт, убедитесь в том, что шрифт может быть сконвертирован для веба!
Сама идея использования различных шрифтов на веб страницах начала бурно развиваться последние два года. О таких темпах развития можно только мечтать. Однако до сих пор разработчикам приходится сталкивать с множеством проблем кроссбраузерного отображения. Все эти проблемы решатся, когда Web Open Font Format (WOFF) будет признан сообществом разработчиков как стандарт.
Другим препятствием, которое уже упоминалось ранее, является распространенность операционной системы Windows, в которой субпиксельный рендеринг отключен (либо по умолчанию в Windows XP или по предпочтению со стороны пользователя). По сравнению с системными шрифтами, большинство веб-шрифтов отображаются в низком качестве, из-за отсутствия субпиксельного рендеринга. Конечно же, со временем данная проблема будет решена, так как пользователи заменят старое оборудование и операционные системы. В то же время, Internet Explorer 9 работает с текстом процессором DirectWrite, что обеспечивает значительно более совершенную обработку.
Использование веб-шрифтов в вашем дизайне требует тщательного тестирования, так как на различных браузерах и платформах результат может быть прямо противоположный. Если экран имеет низкое разрешение, и отсутствует поддержка субпиксельного рендеринга, то отображение будет искажено или будет вовсе отсутствовать. Самый простой способ решения данной проблемы - это чтобы все сменили железо и операционки! Но этого же не будет) Конечно, вы можете использовать JavaScript, для того чтобы узнать о поддержке субпиксельного рендеринга.
Отображение текста
Даже если некоторые веб макеты приближаются по сложности к макетам из печати (благодаря богатым наборам вложенных шрифтов), есть еще большая проблема: браузеры автоматически не расставляют переносы. Особенно в языках, где существует много длинных слов (например, немецкий), что плохо сказывается на читаемости текста.
Но это дело можно подправить при помощи JavaScript client-side hyphenation , который был разработан phpHyphenator . Но и с этим инструментом могут возникнуть проблемы интеграции в браузере, но в будущем, думаю, и это будет решено.
Фишки OpenType
Тут есть и обратная сторона медали. Дело в том, что такие программы как InDesign и QuarkXPress 7+, не поддерживают типографических стандартов OpenType.
Функции и опции OpenType позволяют развивать этот формат, для того чтобы он мог иметь больше возможностей. Если приложение поддерживает данные фишки, то некоторые символы могут быть автоматически заменены.
Некоторые шрифты могут быть использованы только при наличии поддержки OpenType. Всеобъемлющей OpenType может содержать глифы и другие элементы. С помощью функции OpenType, базовая версия будет заменена версией с соответствующими элементам, которые поддерживаются в софтине. Пример на рисунке:
Недавно вышедший Firefox 4 поддерживает все вышеперечисленные фишки OpenType. Теперь вы можете пользоваться данными преимуществами следующим образом:
H1 { -moz-font-feature-settings: "smcp=1"; }
Microsoft предоставила список возможностей OpenType, которые поддерживает. Будем надеяться, что все остальные браузеры последуют их примеру.
Надеемся, эта статья была для вас познавательна! В скором времени все эти проблемы навряд ли решатся. Нам остаётся только ждать.
