Любому веб-мастеру необходима площадка для тестирования. На сегодняшний день таких проектов около десятка. Есть старые проекты, есть молодые; более “навороченные” или менее “навороченные”. Каждый из мастеров выбирает себе тот, который ему больше всего нравиться.

Наиболее популярные сервисы такого рода это CodePen и jsFiddle. Лично мне больше нравиться jsFiddle, но у него есть один существенный для меня недостаток (точнее - их два на самом деле). В этом сервисе можно выполнить замену CSS на SCSS, но подключить библиотеку Compass - нельзя. И еще там нет автоматического обновления создаваемого проекта.

Другой сервис - CodePen является идеальным инструментом для веб-мастера или верстальщика. В нем есть все, что нужно и ничего лишнего. Может быть, это потому, что проект был создан хорошо известным Cris Coyier?

Данная статья, возможно, никогда не была бы написана, если не одна причина - я не знал, как в этом сервисе подключить поддержку SCSS + Compass. Решение лежало на поверхности, достаточно было “остановиться на бегу” - выделить немного времени на изучение этого проекта.

Ниже привожу подробное и красочное описание работы с CodePen в картинках. Точнее - это будет описание основных, самых основных или ключевых моментов при написании кода в CodePen.

Главная страница CodePen

Первое, что необходимо, это конечно же зайти на данный ресурс по адресу http://codepen.io. Тем, кто первый раз попал сюда, может зарябить в глазах, но это с непривычки:

Главная страница CodePen

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

Внизу каждого “окошка” с готовой работой показаны метаданные - информация об авторе. К примеру, рассмотрим код, созданный автором по имени Yaroslav. Видим, что веб-мастер экспериментировал с созданием на CSS различных продвинутых типов background (насколько правильно я понял его работу чисто по внешнему виду, исходный код не смотрел). Комментариев к его работе никто не пожелал оставить, хотя ознакомилось с ним уже 129 человек и семерым из них он даже понравился.

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

Настройка CodePen - начало

В принципе, больше ничего нас в главном окне CodePen не интересует - ведь нам необходимо самим создавать “нетленные” работы! Для этого сначала нужно зарегистрироваться на CodePen, после чего получаем свой личный кабинет с настройками. Так как первоначально задача стояла в подключении SCSS + Compass в CodePen, то будет решать ее с первых шагов. В правом верхнем углу есть синий значок-аватар, по которому нужно щелкнуть мышью. Раскроется список, в котором необходимо выбрать строку “Your Settings”:

Доступ к личному профилю на CodePen

Все настройки CodePen уместились на одной странице и это замечательно! Окно разделено на четыре секции - Syntax Hightlighting, Fonts, Key Bindings, Preprocessor & Library Defaults. В принципе, здесь все интуитивно понятно:

Настройки CodePen

Секция Syntax Hightlighting служит для выбора цветовой схемы подсветки синтаксиса с предварительным просмотром. Можно выбрать одну из пяти, но первая (по умолчанию) самая лучшая.

Секция Fonts помогает выбрать шрифт и размер шрифта. Выбор шрифтов небольшой, но лучше оставить Monaco - он лучше всех смотрится. Размер шрифта можете выбрать, какой вам нравиться.

Секция Key Bindings совсем простенькая - здесь можно выбрать сочетание клавиш при работе в CodePen. Normal - это обычный набор сочетаний клавиш, а Vim для тех, кто привык и хорошо себя чувствует в линуксовом (весьма своеобразном) редакторе Vim.

Секция Preprocessor & Library Defaults самая большая и самая необходимая для нас, ведь ради нее мы и зашли в настройки. В этом разделе можно установить, какие препроцессоры для HTML, CSS и JavaScript будут использоваться в каждом новом проекте, создаваемом в CodePen. В строке HTML Preprocessor ничего не делаем, так как препроцессорами для HTML не пользуемся. В строке CSS Preprocessor выбираем из списка SCSS, а в следующей строке CSS Preprocessor Add-on выбираем библиотеку под SCSS - Compass (for Sass). Строка CSS Reset служит для выбора “CSS-ластика”: CSS Reset или Normalize. Можно также обратить внимание на строчку Prefix Free?, в которой есть возможность поставить галочку:

JavaScript библиотека Prefix Free

Prefix Free - это JavaScript, созданный для того, чтобы работать с браузерными префиксами на самом современном уровне. Другими словами, этот скрипт фильтрует созданный CSS-код на предмет наличия в нем браузерных (вендорных) префиксов и проверяет, какие из них нужно использовать на сегодняшний день, а от каких уже можно отказаться. Польза Prefix Free в очистке CSS-кода от лишнего мусора и увеличение скорости загрузки в браузере.

Но продолжим разбор секции Preprocessor & Library Defaults. Три последние строчки относятся к поддержке JavaScript в CodePen. В строке JS Preprocessor выбирается препроцессор JavaScript, в строке JS Library - подключаем библиотеку JavaScript, а в строчке Modernizr? отмечаем, нужна ли нам встроенная поддержка JavaScript-библиотеки Modernizr.

Последняя строчка Auto Run? очень полезна и по умолчанию она включена. Ее задача автоматически обновлять создаваемый проект в окне предпросмотра. Очень удобная функция. К примеру, в jsFiddle этого нет, там нужно самому нажимать кнопку Run каждый раз, когда нужно обновить окно предпросмотра после внесения изменений в исходный код.

Вот и все, что можно или нужно сделать в настройках CodePen. Сохраняем изменения, нажав большую зеленую кнопку Save All Settings в нижнем правом углу окна.

Быстрая настройка CSS-препроцессоров в CodePen

Стоит также сказать, чтобы настройки, рассмотренные выше, можно внести в создаваемый проект “на лету”. Для этого нужно щелкнуть мышью на значке шестеренки в окне кода CSS. Появиться небольшое окошко с выбором одного из четырех CSS-препроцессоров: SASS, SCSS, LESS, Stylus. Также можно выбрать CSS-ластик: Normalize, Reset или вообще никакого (Neither). Включить библиотеку Prefix-Free; подключить внешнюю таблицу стилей CSS или же другой проект, указав в строке External CSS File or Another Pen абсолютный путь к этому файлу:

Окно быстрых настроек CSS в CodePen

Кнопка Analyze CSS via CSS Lint служит для проверки CSS-кода в CodePen на синтаксические ошибки с помощью известного проекта CSS Lint (под редактор Sublime Text также есть подобный плагин). На рисунке “Основное окно CodePen” внимательный читатель может заметить ошибки, на которые обязательно “заругается” CSS Lint. В частности, font-size: 62,5% )):

Выбираем CSS-препроцессор в CodePen

Основное окно CodePen

С настройками CodePen разобрались, теперь давайте вкратце рассмотрим основное окно в этом редакторе. Оно разбито на три части для написания кода на HTML, CSS и JavaScript. Внизу расположено окно предварительного просмотра. Не стоит даже упоминать, что можно легко изменить расположение и вид этих окон:

Основное окно CodePen

Вверху находятся четыре большие кнопки: Save, Fork, Info, Share. Кнопка Save - конечно же для сохранения проекта (Pen). Если имеются несохраненные изменения, то вверху этой кнопки появляется оранжевая полоска, как напоминание о необходимости сохранить изменения. Кстати, забыл упомянуть, что в CodePen проект называется Pen (</em>вот так незатейливо</em>). Кнопка Fork - для создания ответвления (fork) проекта. Кнопка Info - внести информацию о создаваемом Pen: его заголовок, описание и мета-теги:

Информация о проекте на CodePen

Кнопка Share весьма и весьма полезна. С помощью нее можно поделиться созданным проектом (кодом) с другими людьми. Собственно, именно для этой цели сервис CodePen и создавался. Там же можно скачать проект в виде zip-архива или выложить его на GitHub. И даже отправить ссылку в виде SMS на указанный номер телефона:

Публичная ссылка в CodePen

На CodePen можно встраивать один проект (Pen) в другой проект (Pen). Более того, созданный Pen можно встраивать в виде готового куска кода в другие проекты (не обязательно созданные в CodePen), в том числе и под CMS WordPress. Это уже совсем круто!

Встраивание CodePen в другой проект

Работаем с SCSS + Compass в CodePen

Настройку подключения SCSS + Compass в CodePen мы выполнили, осталось посмотреть, реально ли все работает. Да, действительно все нормально! Собственно, сам код SCSS внимательный читатель мог увидеть уже на рисунке “Основное окно CodePen”, когда говорилось о трех основных окнах CodePen. Там же можно было заметить, что рядом с надписью CSS появилась еще одна - (SCSS), что говорит о включенной поддержке SCSS.

На рисунке хорошо видны переменные SCSS и подключения mixin’ов из библиотеки Compass для создания радиуса скругления (border-radius), линейного градиента (linear gradient) и тени блока (box-shadow):

@include border-radius(...)
@include single-box-shadow(...)
@include background-image(...)

Двойной щелчок мыши на значке квадратика в правом верхнем углу окна CSS(SCSS) распахивает его на всю ширину окна браузера для большего удобства работы с кодом:

Распахиваем окно кода в CodePen

А щелчок мыши на самой надписи CSS переводит окно в режим компиляции, то есть перевода SCSS в готовый CSS-код:

Создание SCSS-кода в CodePen

Клавиатурные сокращения CodePen

В заключение можно упомянуть горячие клавиши для работы в CodePen. В принципе, ничего неожиданного в списке сочетания клавиш для CodePen нет, кроме, может быть, единственного - новый проект (Pen) создается с помощью Ctrl+P (а ожидался стандартный Ctrl+N). Также заметно, что сочетания клавиш обозначены под Mac OS X (это естественно - у автора проекта рабочий компьютер Mac). Но это не значит, эти горячие клавиши не будут работать и под Windows:

Список клавиатурных сокращений в CodePen

Заключение

На этом статья о сервисе CodePen завершена. Конечно, можно было бы упомянуть о добавлении проектов Pen в Коллекции, о кнопке удаления Pen. Но я оставлю это в качестве “домашнего задания” для тех, кому это нужно.


В CSS существует два типа псевдо-сущностей: псевдо-классы (pseudo-class) и псевдо-элементы (pseudo-element). В спецификации CSS2.1 имеются следующие псевдо-классы и псевдо-элементы (pseudo-element):

Псевдо-классы (pseudo-class):

  • :link - непосещенная ссылка (ни разу не щелкали мышью по ней)
  • :visited - посещенная ссылка (уже щелкнули мышью на ссылке)
  • :hover - наведенная ссылка (навели курсор мыши на ссылку)
  • :focus - элемент в фокусе (кнопка или поле ввода получили фокус при нажатии клавиши Tab)
  • :active - активный элемент (например, ссылка, на которой произведен щелчок мыши)
  • :first-child - элемент, являющийся первым ребенком своего элемента-родителя
  • :lang() - элемент, основанный на значении его аттрибута lang

Псевдо-элементы (pseudo-element):

Псевдо-элементы, существующие в спецификации CSS2.1:

  • ::first-line
  • ::first-letter
  • ::before
  • ::after

Так в чем же разница между псевдо-классом (pseudo-class) и псевдо-элементом (pseudo-element)? Все различие заключается в способе, которым эти две псевдо-сущности осуществляют воздействие на HTML-документ.

Псевдо-классы (pseudo-class) ведут себя так, как если бы они добавлялись в виде обычных классов элементам HTML-страницы при выполнении определенных событий. Псевдо-элементы (pseudo-element) ведут себя так, как если бы они были обычными элементами HTML-страницы, но добавляемыми на нее при выполнении определенных событий.

Прим. переводчика: заметили одну особенность? Обе псевдо-сущности появляются на HTML-странице только при одном условии - выполнении какого-то (не важно, какого) события. Просто одна сущность появляется на странице в виде класса (pseudo-class), а вторая в виде элемента (pseudo-element). Каким образом появляются? Только одним способом - браузер сам создает (генерирует) псевдо-сущность при выполнении указанного события. Поэтому псевдо-сущности иногда называют генерируемым содержимым. Название “псевдо” в точности говорит само за себя - “как-будто”. То есть - “как-будто класс”, “как-будто элемент”. Название дано не случайно - в исходном коде HTML-страницы не существуют таких классов или элементов; но они появляются (генерируются) там с помощью браузера при определенном событии.

Возьмем в качестве примера псевдо-элемент (pseudo-element) ::first-letter. Предположим, необходимо сделать каждую первую букву заголовка h1 вдвое большего размера, чем остальной текст в этом заголовке.

Легко:

h1::first-letter{
 font-size: 250%;
 color: #778899;
}

Псевдо-элемент ::first-letter

Такое впечатление, что внутри HTML-разметки и CSS-таблицы произошли следующие изменения:

HTML-разметка:

Howdy, y'all

CSS-правило:

h1 first-letter{
 font-size: 250%;
}

Выглядит это так, словно в действительно все так (как создается впечатление) и происходит внутри браузера, не правда ли? Кто знает? Все, что вы знаете, что это работает так, как будто на самом деле так и выглядит. Имя всему этому “псевдо-элемент”.

Аналогично, псевдо-класс работает так, если обычный класс добавляется к элементам внутри HTML-документа.

Например, представим себе, что браузер добавляет класс first-child к каждому элементу li, который является первым ребенком своего родителя ul. Тогда эти элеиенты можно оформить в виде следующего CSS-правила:

li.first-child{
 border-left: none;
}

Простая замена точки на двоеточие (получается li:first-child) и мы имеем тот же самый конечный результат, без необходимости добавления вручную классов к элементам внутри всей HTML-разметки.

Вы могли уже догадаться относительно использования в псевдо-элементах двойного двоеточия. Такой синтаксис появился уже позже спецификации CSS2.1 (в спецификации CSS3).

Ни у одного браузера нет строго условия использования двойного двоеточия в псевдо-элементах: одинарное двоеточие прекрасно понимается всеми браузерами.

CSS3 псевдо-классы (pseudo-class):

Спецификация CSS3 добавляет еще несколько псевдо-классов (pseudo-class), большинство из которых не имеет всеобщей поддержки в браузерах (на момент написания статьи):

  • :target
  • :root
  • :nth-child()
  • :nth-of-type()
  • :nth-last-of-type()
  • :first-of-type
  • :last-of-type
  • :only-of-type
  • :only-child
  • :last-child
  • :empty
  • :not()
  • :enabled
  • :disabled
  • :checked

Автор статьи: Eric Meyer - “Smashing CSS Professional Techniques for Modern Layout”

На этом все.


Псевдоэлемент :first-of-type служит для выборки дочернего элемента определенного типа.

Можно сказать, что псевдоэлемент :first-of-type является частным случаем псевдоэлемента :first-child. Если псевдоэлемент :first-child выполняет выборку первого дочернего элемента вне зависимости от его типа, то псевдоэлемент :first-of-type осуществляет выборку первого дочернего элемента только указанного типа (если этот элемент отвечает заданному условию - типу элемента).

Аналогично работает псевдоэлемент :last-of-type, только применяется к последнему дочернему элементу определенного типа. Более общим случаем является псевдоэлемент :last-child.

Псевдоэлементы :last-child, :nth-child(), :first-of-type НЕ ПОДДЕРЖИВАЮТСЯ IE8.

Пример:

.fofo p:first-of-type{}

… в примере тег p является указанием типа дочернего элемента. То есть, будет выбран первый дочерний элемент типа p, родителем которого является элемент с классом .fofo.

.wowo p:last-of-child{}

Выбрать последний дочерний элемент типа p, родителем которого является элемент с классом .wowo.

Рабочий пример приведен ниже. Два одинаковых списка. К первому применен псевдоэлемент :first-of-type, ко второму - псевдоэлемент :first-child.

В первом случае выбран первый параграф списка, так как в выражении указано выбрать именно первый дочерний элемент списка, являющийся параграфом p:

.fofo p:first-of-type{
 font-weight: bold;
 color: #222;
 font-variant: small-caps;
 text-shadow: 1px 1px 1px #999;
}

Во втором случае к списку применен псевдоэлемент :first-child и в этом случае был отобран первый элемент указанного списка - ссылка a! А то, что этот элемент является ссылкой, а не параграфом p, роли не играет - тип элемента не был указан:

.wowo :first-child{
 font-size: 14px;
 font-style: italic;
 color: green;
 font-weight: bold;
}

Псевдоэлемент :first-of-type

Псевдоэлемент :last-of-child и его общий случай :last-child разбирать смысла нет, так как выборка элемента из HTML-документа осуществляется аналогично с тем лишь различием, что применяется не к первому, а последнему дочернему элементу.

Псевдоэлемент :nth-of-type

Псевдоэлемент :nth-of-type является частным случаем псевдоэлемента :nth-child. В случае с :nth-of-type выборка элементов производится не только по порядковому номеру, но и по типу элемента.

Например, p img:nth-of-type(odd){float: left} и p img:nth-of-type(even){float: right} делает выборку четных и нечетных порядковых номеров только элементов img.

Отбираются все дочерние по отношению к .nthOfType элементы типа img, нечетные по порядковому номеру. И применяются к нему правила - смещение влево, margin-right и тень справа:

.nthOfType img:nth-of-type(odd){
 float: left;
 margin: 0 10px 0 0;
 box-shadow: 3px 3px 3px rgba(0,0,0,.65);
}

Отбираются все дочерние по отношению к .nthOfType элементы типа img, четные по порядковому номеру. И применяются к нему правила - смещение право, margin-left и тень слева:

.nthOfType img:nth-of-type(even){
 float: right;
 margin: 0 0 0 10px;
 box-shadow: -3px 3px 3px rgba(0,0,0,.65);
}

Псевдоэлемент :nth-of-type

Псевдокласс :not

Псевдокласс :not (псевдокласс отрицания) - выбрать все элементы p, у которых НЕТ класса .classy и применить к ним следующие свойства: цвет и тень. Другими словами, выборка элементов с помощью псевдокласса :not производится от обратного - “выбрать все элементы, которые НЕ ОТВЕЧАЮТ следующему условию.”

Этот псевдокласс является антагонистом обычного условия - “если удовлетворяет условию, то примени такое-то свойство”:

 class="classy">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

.dodo p:not(.classy){
 color: blue;
 text-shadow: 1px 1px 1px rgba(0,0,255,.2);
}

Псевдоэлемент :not

На этом все.


Псевдо-элемент nth-child() полезен и удобен в применении.

Единственный момент, который мне всегда давался с трудом (а потом быстро забывался) - это запомнить тот алгоритм, по которому данный псевдо-элемент производил свои вычисления.

С ключевыми словами все более или менее ясно и просто - их всего два, одно отвечает за счет четных чисел, другое - за счет нечетных чисел. Нумерация в списках начинается с 1, а не с нуля. Поэтому при выборке с помощью ключевого слова odd - выбираются все нечетные позиции (1, 2, 3, 5, 7, ...). С помощью ключевого слова even - выбираются четные позиции (2, 4, 6, 8, ...).

Например, так:

li:nth-child(odd) a{
 color: #778899;
 text-decoration: none;
}

или так:

li:nth-child(even) a{
 color: #778899;
 text-decoration: none;
}

Псевдо-элемент nth-child(even)

А вот с общей формулой примерного вида 2n+2 было несколько сложнее. Пока я в “Большой книге CSS3” не нашел простого и краткого объяснения, как “читать” это выражение.

Все просто на самом деле. Допустим, у нас есть такое выражение:

li:nth-child(2n+3){
 color: #778899;
 text-decoration: none;
}

… здесь мы говорим браузеру - применить цвет #778899 и убрать подчеркивание text-decoration: none; к тексту каждого второго (2n) элемента li, начиная с третьего (3).

Еще примеры:

  • .third li:nth-child(3n+2) - выбрать каждый третий элемент, начиная со второго по порядку;
  • .fifth li:nth-child(5n+3) - выбрать каждый пятый элемент, начиная с третьего элемента;
  • .forth li:nth-child(4n+2) - выбрать каждый четвертый элемент, начиная со второго.

То есть, видя выражение типа 3n+4, мы читаем его так: каждый третий элемент, начиная с четвертого. Вопрос остается открытым в отношении загадочной буквы n.

Как уже можно было догадаться, это всего лишь счетчик. Это объяснение выражения было “подсмотрено” мною на CSS-Tricks (How nth-child Works).

Буква n в этом выражении - счетчик, начинающийся с 0. То есть, если взять первое выражение - .third li:nth-child(3n+2), то вычисление внутри него будет производиться следующим образом:

3 * 0 + 2 = 2
3 * 1 + 2 = 5
3 * 2 + 2 = 8
3 * 3 + 2 = 11
3 * 4 + 2 = 14
3 * 5 + 2 = 17
3 * 6 + 2 = 20
...

То есть, как и говорилось выше - каждый третий элемент, начиная со второго. Совершенно ничего сложного, как видим. Простая математика и запоминать ничего не нужно. Главное - понять алгоритм вычисления в этом выражении.

Тогда ключевое слово odd можно записать в виде выражения 3n, а ключевое слово even как выражение 2n. Ключевые слова были введены в употребление для удобства ввиду частого использования выражений 2n и 3n.

На этом все.


Выжимка из замечательной книги “Большая книга CSS3 3-е издание” Дэвида Макфарланда о веб-шрифтах и способе их подключения с помощью директивы @font-face.

Узнал об этой теме массу нового для себя. В частности, два способа подключения шрифтов, особенность работы с сервисом Google Fonts и числовая шкала плотности шрифтов, ресурсы для поиска бесплатных шрифтов, тонкости работы с генератором FontSquirrel, ресурсы по шрифтовым иконкам. Для меня информация оказалась чрезвычайно полезной и интересной.

Ниже привожу краткий конспект всех вопросов, показавшихся мне интересными и новыми в моей практике, пересказанный своими собственными словами. Надеюсь, данный материал окажется полезным не только для меня одного.

Подключение веб-шрифтов с помощью @font-face:

  • подключение нестандартного шрифта с помощью директивы @font-face
  • назначение подключенного шрифта с помощью свойства font-family

Директива @font-face указывает (название говорит само за себя - директива!) браузеру сделать две вещи:

  • создать указываемое имя шрифта
  • загрузить глифы для шрифта из указанного ею места

Свойство font-family указывает браузеру применить шрифт с указанным именем выбранным элементам страницы.

Существует несколько форматов веб-шрифтов. Наиболее распространенные из них: EOT, WOFF, OTF или TTF,

Формат EOT, который понимают браузеры IE вплоть до версии 8. Собственно, этот формат шрифта создан и существует только ради этого браузера и таких его версий. Чтобы получить шрифт формата EOT, необходимо специальное программное обеспечение для преобразования формата TTF в OET.

Формат WOFF (Web Open Font Format) является наилучшим на сегодняшний день для использования в Веб: самый маленький и легкий, поддерживается всеми современными браузерами (в том числе IE9 и выше); этот формат был создан специально для Веб. Фактически - это облегченная версия формата TTF или OTF.

Форматы OTF (Open Type Font) и TTF (True Type Font) - это самые обычные компьютерные шрифты, которые используются в большинстве операционных систем (Windows, Macintosh, Linux) и в приложениях под эти системы. Но, помимо этого, такие шрифты можно легко использовать и в Интернете.

Формат SVG - это даже не формат шрифта, а формат графики, графического изображения. Особенностью этого формата является то, что графика в этом формате создается исключительно с помощью векторов, то есть - математических формул.

Благодаря этому изображения в таком формате масштабируются без потери качества - при увеличении размера картинки компьютеру достаточно пересчитать векторные точки. Особенность этого формата графики позволила применить его для создания “шрифтов”. То есть, обычный шрифт преобразуется в формат SVG, где каждый шрифт - это фактически картинка в масштабируемом формате SVG.

Зачем потребовались такие трудности? Все дело в том, что браузеры под ОС Android (очень распространенная ОС под мобильные устройства) могут отображать веб-шрифты только в этом формате. Браузеры под iPhone (Safari 4.1 и ниже) также не умеют распознавать веб-шрифт. Вот этим “неумехам” и подсовывают картинки в виде шрифтов - “не умеешь кушать обычную пищу, так кушай хотя бы это!”.

Правовой вопрос использования шрифтов

Вопрос можно кратко cформулировать в следующих двух предложениях. Все шрифты делятся на платные или бесплатные.

Платные шрифты делятся на те, которые:

  • можно использовать в Веб
  • нельзя использовать в Веб

Чтобы не заморачиваться решением запутанного вопроса лицензии на шрифты, можно воспользоваться веб-службами Google Fonts или TypeKit, на которых собраны все шрифты, которые можно использовать в Веб. Шрифты на этих серверах либо бесплатные (Google Fonts), либо платные (TypeKit).

Краткий список источников бесплатных шрифтов, которые можно использовать в Веб:

The League of Movable Type

Большинство веб-сервисов, которое предоставляет шрифты для Веб, “отдают” их в формате OTF или TTF. Поэтому нужно конвертировать этот шрифт в четыре формата, описанных выше, для того, чтобы максимальное число посетителей сайта смогло увидеть на своих устройствах содержимое данного сайта. Для конвертирования не нужно искать специальное программное обеспечение. Можно воспользоваться бесплатным генератором @font-face Generator, находящемся на сервере FontSquirrel (http://www.fontsquirrel.com/).

Единственное ограничение этого сервиса - он имеет свой собственный blacklist, в который помещены шрифты, запрещенные по лицензии для использования в Веб. Другими словам, если “подсунуть” этому генератору лицензионный шрифт, приобретенный пиратским способом, то он откажется от генерации последнего.

Генератор @font-face Generator - не единственный в Веб сервис подобного рода. Существуют подобные ему генераторы, которые, в тому же, обладают “неразборчивостью” по отношению к лицензии конвертируемого шрифта.

Порядок указания форматов шрифтов в директиве @font-face важен и должен быть следующим:

@font-face{
 font-family: 'PTSans';
 src: url('PTSansRegular.eot');
 src: url('PTSansRegular.eot#iefix') format('embedded-opentype'),
  url('PTSansRegular.woff') format('woff'),
  url('PTSansRegular.ttf') format('truetype'),
  url('PTSansRegular.svg') format('svg');
}
  • EOT - формат только для Internet Explorer 8 и ниже
  • WOFF - самый современный и маленький по размеру шрифт, который понимают большинство современных браузеров
  • TTF - сравнительно большой по размеру шрифт и достаточно устаревший
  • SVG - самый большой по размеру и объему шрифт, поэтому его необходимо размещать в самой последней строке. К тому же, этот формат шрифта используется только в браузерах ОС Android или в браузере Safari 4 (то есть, iPhone)

Браузер читает тело директивы @font-face - каждую строку последовательно. Как только он обнаруживает понятный для него формат шрифта, то загружает его. Поэтому последовательность объявления форматов шрифтов в директиве @font-face является неслучайной и эмпирически выверенной на основе опыта предыдущих веб-разработчиков.

h1{
 font-family: 'League Gothic', Arial, sans-serif;
 font-weight: normal;
}

Правильное применение подключенного web-шрифта League Gothic. Здесь указывается на первом месте имя подключенного шрифта, а затем - резервные шрифты, которые заведомо установлены в системе пользователя (имя шрифта, гарантировано имеющегося в системе и семейство шрифтов).

Внимательный читатель обратит внимание на вторую строку и скажет: это здесь лишнее, бред какой-то. На самом деле не совсем так. Браузеры всегда пытаются отрисовать заголовки полужирным начертанием, по умолчанию. Поэтому, здесь мы говорим, чтобы браузер просто этого не делал, и все.

Помимо букв, шрифты могут состоять из иконок или изображений. Ресурсы, посвященные теме шрифтовых иконок и значков:

Виды шрифтов

При подключении шрифтов, установленных на компьютере, обычно не возникает вопросов и мы не задумываемся о том, как так получается, что при указании браузеру отрисовать текст полужирным с помощью тега strong у нас действительно получается полужирный шрифт; при указании сделать текст курсивным через тег em текст действительно делается курсивным; а при полужирном курсиве через теги strong em он делается полужирным курсивом. Нам кажется, что браузер делает текст таким, каким мы указываем ему.

На самом деле это не так. Или не совсем так. Браузер действительно отрисовывает шрифт указанным ему способом, но вот с самим шрифтом он ничего сделать не может. Он просто берет указанное тегом начертание шрифта и выводит его на экран. Дело в том, что дизайнеры или компании, занимающиеся разработкой шрифтов, создают шрифты таким образом: художник рисует четыре набора одного и того же шрифта. То есть, рисуется набор символов в обычном начертании (regular), затем рисуется набор символов в курсивном начертании (italic), потом набор символов в полужирном начертании (bold), и наконец набор символов в полужирном курсивном начертании (bold italic). Все эти четыре набора символов фактически являются отдельными шрифтами, хотя и носят одно общее название (Georgia, Tahoma, Helvetica и так далее).

Когда браузеру указывается, какое начертание применить, он просто берет шрифт с указанным начертанием и отображает его. К примеру, шрифт Arial имеет четыре вида начертания. Если указывается, что нужно полужирное начертание, то браузер берет полужирное начертание Arial. Сам браузер преобразовать одно начертание в другое не может ни в коей мере. Он может выполнить только одну вещь - попытаться сделать и обычного начертания “курсивное”. Команда, говорящая браузеру выполнить такую задачу, имеет название oblique. В этом случае браузер просто тупо выполняет наклон всех букв шрифта на 45 градусов, и все. Получившийся результат может быть просто ужасным, поэтому такая команда используется очень редко.

В случае с веб-шрифтами веб-дизайнеру нужно самому побеспокоиться от том, чтобы подключить все четыре вида начертания выбранного шрифта по отдельности. Из-за браузера IE8 подключение веб-шрифтов с помощью директивы @font-face значительно осложняется и может быть выполнено двумя способами: простым, который IE8 не понимает (но понимают все остальные браузеры) и сложным, который будет доступен и IE8 также.

Простой способ подключения веб-шрифта

Простой способ заключает в добавлении к директиве @font-face двух CSS-правил: font-weight и font-style. Обычно эти два правила задают браузеру команды отображать текст полужирным и курсивным начертанием. Но внутри директивы @font-face эти правила выполняют другую роль, они заставляют браузер загрузить веб-шрифт с указанным стилем и жирностью. Чтобы быть более понятным, приведем сразу пример подключения веб-шрифта PTSans с четырьмя вариантами его отображения:

@font-face{
 font-family: 'PTSans';
 src: url('PTSansRegular.eot');
 src: url('PTSansRegular.eot#iefix') format('embedded-opentype'),
 url('PTSansRegular.woff') format('woff'),
 url('PTSansRegular.ttf') format('truetype'),
 url('PTSansRegular.svg') format('svg');
 font-weight: normal;
 font-style: normal;
}
@font-face{
 font-family: 'PTSans';
 src: url('PTSansItalic.eot');
 src: url('PTSansItalic.eot#iefix') format('embedded-opentype'),
 url('PTSansItalic.woff') format('woff'),
 url('PTSansItalic.ttf') format('truetype'),
 url('PTSansItalic.svg') format('svg');
 font-weight: normal;
 font-style: italic;
}
@font-face{
 font-family: 'PTSans';
 src: url('PTSansBold.eot');
 src: url('PTSansBold.eot#iefix') format('embedded-opentype'),
 url('PTSansBold.woff') 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;
}

Расскажу, как я понимаю данные CSS-правила. Директива @font-face является своего рода функцией наподобие функции в JavaScript (а может это и есть функция на самом деле, уж больно похожа по своему функционалу?). Эта функция (я буду называть так здесь эту директиву) объявляет имя переменной правилом font-family: 'PTSans'. Эта переменная является массивом, который заполняется значениями с помощью последующих правил:

  • src: url('PTSansBoldItalic.eot') - местоположение шрифта;
  • font-weight: normal - загрузить шрифт указанной жирности;
  • font-style: normal - загрузить шрифт указанного стиля.

CSS-правила требуют, чтобы при четырех вариантах отображения шрифта заполнение массива PTSans производилось каждый раз отдельным вызовом функции @font-face. После этого достаточно подключить переменную PTSans к выбранным элементам страницы:

p {
 font-family: PTSans;
}

И затем HTML-тегами strong или em указать, какое начертание шрифта применить к указанным элементам:

dolor ets <strong>lorem ipsum dolor etsstrong> lorem ipsum ipsum dolor ets lorem ipsum <em>dolor ets lorem ipsum dolorem> ets lorem ipsum dolor ets

Браузер “вытащит” из массива PTSans шрифт нужного начертания (bold или italic или bold italic) и применит его к указанным элементам страницы.

Преимуществом данного способа подключения веб-шрифта является его универсальность. Достаточно один раз объявить шрифт с помощью директивы @font-face и правила:

какой-то элемент {
 font-family: PTSans;
}

… чтобы потом управлять отображением этого шрифта посредством семантически верных тегов strong и em.

Сложный способ подключения веб-шрифта

К сожалению, IE8 не понимает способа подключения веб-шрифта, описанного выше. Точнее, этот браузер не понимает способа подключения различных начертаний шрифта к одному и тому же имени этого шрифта. Если создать правила, описанные выше и попробовать загрузить полученную HTML-страницу в IE8, то весь текст будет отображен как: font-family: PTSans; font-weight: normal; font-style: normal.

В тех местах, где применены теги strong или em, браузер IE8 будет сам делать из шрифта PTSans начертания bold и italic, а не подключать уже готовые шрифты в этих начертаниях. Результат такой “самодеятельности” будет плачевным.

Выходом из положения будет применение различных имен шрифта в директиве @font-face. Пример варианта подключения веб-шрифта, понятного для IE8, показан ниже:

@font-face{
 font-family: 'PTSansRegular';
 src: url('PTSansRegular.eot');
 src: url('PTSansRegular.eot#iefix') format('embedded-opentype'),
 url('PTSansRegular.woff') format('woff'),
 url('PTSansRegular.ttf') format('truetype'),
 url('PTSansRegular.svg') format('svg');
}
@font-face{
 font-family: 'PTSansItalic';
 src: url('PTSansItalic.eot');
 src: url('PTSansItalic.eot#iefix') format('embedded-opentype'),
 url('PTSansItalic.woff') 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.woff') 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-weight и font-style во всех четырех директивах @font-face. Такой код выглядит даже более понятным и логичным, нежели первый вариант. И вроде бы все хорошо, но задавайте теперь рассмотрим простой пример параграфа с тегами strong и em, к которому следует применить шрифт PTSans.

Оцените этого CSS -“крокодила” ниже. Какой он громоздкий и неуклюжий! А если учесть, что на HTML-странице нужно будет применить шрифт PTSans не только к элементу p, а еще к заголовкам h1, h2, ссылке a? Насколько же “раздуются” таблицы стилей в этом случае! А если вдруг (не дай Бог!) придется вносить изменения в такой код?

p{
 font-family: PTSansRegular;
 font-weight: normal;
 font-italic: normal;
 font-size: 36px;
}
p strong{
 font-family: PTSansBold;
 font-weight: bold;
 font-italic: normal;
}
p em{
 font-family: PTSansItalic;
 font-weight: normal;
 font-italic: italic;
}
p strong em{
 font-family: PTSansBoldItalic;
 font-weight: bold;
 font-italic: italic;
}

Применять или не применять второй способ подключения веб-шрифтов - это вопрос того, насколько необходима поддержка IE8 для конкретного сайта. Следует учесть, что доля IE8 падает и будет продолжать падать.

Шрифты Google Fonts

Чтобы не заморачиваться с поиском шрифта, скачиванием его в формате TTF или OTF, конвертации на генераторе типа FontSquirrel Generator, подключения полученных CSS-стилей в проект с помощью многочисленных директив font-face, можно воспользоваться сервисом Google Fonts. Преимущество этого способа заключается в простоте способа и его надежности - достаточно получить на сервере Google одну строку ссылки и поместить ее в свой проект.

Примечательный момент использования шрифтов Google - это способ подключения полученных шрифтов. Первый способ - с помощью тега link, второй в помощью директивы @import, третий с помощью скрипта JavaScript.

Первый способ прост, но имеет один недостаток - тег link нужно будет подключать к каждой из разрабатываемых HTML-страниц проекта.

В тоже время, второй способ с помощью директивы @import более лаконичный - достаточно подключить ее в начало таблиц стилей, чтобы выбранные шрифты применялись ко всем HTML-страницам.

Третий способ с помощью JavaScript кроме сложности, никаких других преимуществ перед двумя другими не имеет.

В Google плотность шрифта обозначается не с помощью ключевых слов normal, bold или bolder, а в числовой шкале - 100 до 900. Значение 400 соответствует normal, 700 - bold.

К примеру, код может выглядеть следующим образом. Зададим для элемента em шрифт Gentium Book Basic нормальной плотности курсивного начертания:

em{
 font-family: 'Gentium Book Basic', serif;
 font-weight: 400;
 font-style: italic;
}

На этом выжимка по веб-шрифтам заканчивается.