Внедрение шрифтов — EOT и @font-face

Уже более десяти лет веб-страницы ограничены так называемым безопасным для интернета набором шрифтов. Один из таких наборов был составлен компанией Microsoft ещё в 1996 году. Arial, Courier New, Georgia, Helvetica, Palatino, Times, Times New Roman, Lucida Sans, Trebuchet, Verdana и ещё несколько красавцев — это те шрифты, которые используются почти на всех страницах интернета. Но теперь, благодаря нарастающему прогрессу и стремлению разработчиков, этот список можно бесконечно расширять. Однако ещё предстоит найти ответы на ряд важных и принципиальных вопросов.

Пример внедрения шрифтов в форматах EOT и OTF.

EOT — Embedded OpenType

Технология Embedded OpenType (встраиваемый формат OpenType) появилась в 1997 году. То есть возможность полноценно использовать любой шрифт на сайте существовала все эти годы, начиная с Internet Explorer 4! Но монополия Microsoft препятствовала популяризации этой технологии. Также свою роль сыграл единственный на то время конкурент Internet Explorer — Netscape, который продвигал другую технологию внедрения шрифтов — TrueDoc.

Технология EOT сжимает и конвертирует шрифты форматов TrueType и OpenType (кроме OpenType PS) в формат EOT. Во время конвертации, в корневую строку (RootString) шрифта прописываются адреса сайтов (или локальные адреса), в рамках которых будет использоваться шрифт. Если адрес сайта не совпадёт с адресом в корневой строке, то шрифт отображаться не будет. Этот механизм защиты от нелегального использования зарекомендовал себя среди известных производителей шрифтов.

До недавнего времени одним из недостатков EOT являлось то, что конвертировать шрифт можно было только с помощью эксклюзивного инструмента от Майкрософта — WEFT (Web Embedding Fonts Tool), который работает только на операционных системах Windows. Вторым, менее значимым недостатком считались “Технические средства защиты авторских прав” — ТСЗАП, задача которых — препятствовать неправомерному копированию файлов.

Устранить эти недостатки удалось благодаря заявлению Microsoft сделать открытыми формат EOT и спецификацию MTX (MicroType Express).

Майкрософт проявила эту инициативу в начале 2008 года, и несколько месяцев спустя, в конце этого же года, было организованно небольшое собрание в W3C с предложением создать Рабочую группу по шрифтам (Fonts WG). На собрании присутствовали представители компаний Bitstream, Microsoft, Mozilla, Opera, W3C, Nokia, Monotype и Inventive Designers.

В ходе дискуссии был выдвинут альтернативный вариант — вместо того, чтобы создавать новый контейнер с так называемой “корневой строкой”, как это делает EOT, можно добавлять эту строку непосредственно в форматы TrueType и OpenType. Ещё один вариант — “закрывать” начальные 100 битов информации, что будет препятствовать использованию интернет-шрифта локально на компьютере.

Сторонники альтернативы считают, что эти действия устранят необходимость в XOR-закрытии, дублировании информации, и компрессии шрифта с помощью технологии MicroType Express. Даже прозвучало возможное расширение нового контейнера — TTW (TrueType-W). Недостаток возможной альтернативы — создание с нуля механизма работы предложенного формата. Но полагается, что для новых приложений, внедрить предложенную схему будет легче, чем внедрить уже существующий EOT.

Зачем вообще использовать EOT или TTW?

Ответ на этот вопрос достаточно очевиден — данные механизмы защищают шрифты от нелегального использования. Цена за лицензию на шрифт может достигать несколько сотен, а то и тысяч долларов. А период разработки только одного шрифта с поддержкой разных языков может достигать нескольких лет! Поэтому производители очень трепетно относятся к использованию своих шрифтов в интернете, так как при просмотре страницы шрифт скачивается локально на компьютер, и становится доступным.

CSS-правило @font-face

Начиная с Firefox 3.5, Google Chrome 2, Opera 10 и Safari 3.1 стало возможным использовать в этих браузерах CSS-правило @font-face. На данный момент эти браузеры обрабатывают любой шрифт форматов OTF и TTF без необходимости конвертации в защищённый формат EOT. Это существенное отличие от Internet Explorer, который поддерживает использование шрифтов только в формате EOT.

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

 /* только для Internet Explorer 4+ */
@font-face {
  font-family: EuroSansProLig;
  src: url(EuroSansProLig.eot);
}

/* далее для всех остальных браузеров */
@font-face {
  font-family: Graublau Sans Web;
  src: local("Graublau Sans Web"),
       local("GraublauSansWeb"),
       url(GraublauWeb.otf) format("opentype");
}

body {
  font-family: Graublau Sans Web, EuroSansProLig,
  Arial, sans-serif;
}

Пример внедрения шрифтов EOT и OTF — вышеприведённый код в действии.

В примере используется уже ставший популярным шрифт Graublau Sans Web (бесплатная версия полноценного шрифта Graublau Sans Pro). Из примерного списка разрешённых для внедрения шрифтов он единственный на данный момент поддерживает кириллицу. Этот шрифт формата OpenType PS, и WEFT не может конвертировать его в EOT. Поэтому специально для Internet Explorer я выбрал бесплатную версию шрифта Euro Sans Pro.

Свойство local проверяет наличие шрифта на компьютере пользователя, и если шрифт не обнаружен, то он подгружается с сервера. Свойство format указывает формат шрифта (“truetype”, “opentype”,”truetype-aat”, “embedded-opentype” и “svg”). Если шрифты Graublau Sans Web и Euro Sans Pro отсутствуют, то для body будет использоваться Arial или любой рубленый шрифт по умолчанию.

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

Таким образом к предыдущему примеру добавляется следующий CSS:

 /* только для Internet Explorer */
@font-face {
  font-family: EuroSansProLigBold;
  src: url(EuroSansProLigBold.eot);
}

/* далее для всех остальных браузеров */
@font-face {
  font-family: Graublau Sans Web Bold;
  src: local("Graublau Sans Web Bold"),
       local("GraublauSansWebBold"),
       url(GraublauWebBold.otf) format("opentype");
}

p {
  font-family: Graublau Sans Web Bold, EuroSansProLigBold,
  Arial, sans-serif;
  font-weight: bold;
}

Отличную статью на тему использования @font-face опубликовал Джон Даггетт из Mozilla — beautiful fonts with @font-face (перевод: Прекрасные шрифты посредством @font-face). Там можно просмотреть различные примеры в действии.

Сколько «весит» подгружаемый шрифт?

Например, каждое из четырёх стандартных начертаний (нормальный, полужирный, полужирный курсив, курсив) всем известного шрифт Arial, весит от 500 до 800 килобайт. Если использовать на сайте все 4 стиля начертания, то получится более двух мегабайт. Очень приличный объём. Но это мелочи по сравнению с объёмом шрифта Arial Unicode MS — больше 20 мегабайт!

Я воспользовался инструментом WEFT и поэкспериментировал со шрифтом Arial нормального стиля начертания без разложения шрифта по каким-либо признакам. Исходный размер arial.ttf составляет 766 килобайт, а уже сформированный arial.eot стал весить 308 килобайт. Контейнер EOT сжал файл в 2,5 раза. Хороший результат. Для примера, максимальное ZIP-сжатие того же шрифта — 423 килобайта, RAR — 370 килобайт. Что касается gzip, то Владимир Левантовский из Monotype подметил, что “EOT-компрессия лучше компрессии gzip на 20-30% для западных шрифтов”.

Разложение шрифта (font subsetting)

Разложение позволяет разбить шрифт на заранее определённое количество знаков. Такой подход значительно уменьшает объём файла. Как показывает предыдущий пример кода, необходимо использовать разные файлы для каждого из начертаний шрифта. Это своего рода разложение по стилю. Есть также другие признаки. Например, разложение шрифта только по языковому набору знаков. Если заранее известно, что на странице будет использоваться только русский язык, то можно ограничить шрифт набором только кириллических знаков, что существенно сократит размер шрифта.

Ещё WEFT может анализировать страницы сайта, и при создании EOT-контейнера использовать лишь те знаки шрифта, которые находятся на анализируемой странице. Такой подход очень сильно сокращает размер шрифта. Пользоваться этим методом удобно в том случае, если заранее известно, что в будущем текст редактироваться не будет, иначе придётся заново обрабатывать шрифт. Например, если есть вероятность того, что в будущем текст страницы будет изменён, но язык текста останется русским, то лучше ограничивать шрифт кириллическим набором.

Оригинал всё того же шрифта arial.ttf (766 килобайт) после разложения на кириллицу с помощью WEFT стал весить 77 килобайт. Разница очевидна.

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

Есть ещё один, на мой взгляд самый удобный метод — правило @font-face в CSS3 позволяет использовать диапазон unicode. При разложении нет необходимости разбивать шрифт на несколько файлов. Вместо этого можно указать диапазон символов.

/* размер шрифта - размер: 4.5 мегабайт */
@font-face {
  font-family: DroidSans;
  src: url(DroidSansFallback.ttf);
  /* диапазон не указван, по умолчанию полный набор знаков */
}

/* Латинские, кириллические и греческие пунктуация и символы - размер: 190 килобайт */
@font-face {
  font-family: DroidSans;
  src: url(DroidSans.ttf);
  unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300;
}

Лёд тронулся

На сегодняшний день все основные браузеры поддерживают внедрение и использование шрифтов на сайте. Идёт активное обсуждение возможных решений возникших задач. На мой взгляд необходимо решить три задачи: механизм лицензирования, метод сжатия и, естественно, сама технология внедрения. С каждой из этих задач уже справляется EOT. Но мнения пока расходятся.

По сей день спорят, что использование технологии от Майкрософта является политически некорректным, и что в ходе “войны браузеров” у компании появляются преимущества. Лично я полностью согласен с тем мнением, что оптимальным вариантом будет внести изменения и доработать EOT, который отдан в руки сообщества разработчиков. А уже потом можно работать над форматами TTF и OTF, чтобы в конечном итоге рынок сам определял, что для него лучше.

У Майкрософта твёрдая позиция — ради производителей шрифтов, компания хочет поддерживать и развивать EOT. Эту позицию также твёрдо поддерживает Adobe и одобряет Monotype — крупный производитель шрифтов. Однако сообщество разработчиков видит возможные пути внедрения специальных веб-таблиц в шрифты форматов OTF и TTF, что запрещает использование шрифта на компьютере, но разрешает его использование в интернете. Но пока это только разговоры.

Представитель Майкрософта Майк Чемпион (Mike Champion) заявил, что “внедрение оригинальных файлов наносит существенный ущерб независимой индустрии шрифтов”. Свои слова Майк подкрепил тем, что “в Microsoft на высоком уровне принято решение о том, что мы не будем использовать подобный метод внедрения шрифтов”.

В примере я использовал бесплатную версию шрифта Euro Sans Pro компании Linotype. Лицензия на этот шрифт разрешает использовать его в интернете, но только при услови, что этот шрифт не будет использоваться где-либо ещё. А на данный момент это означает EOT.

В любом случае, при желании использовать какой-либо шрифт, большинство официальных сайтов и крупных порталов будут приобретать соответствующие лицензии. Особенно на Западе им некуда деваться — позовут в суд. А для тех, кто не хочет платить сотни баксов за шрифт, есть возможность использовать бесплатные варианты. Благо, такие уже начинают появляться в интернете. Но действительно качественные работы — всё ещё очень большая редкость.