umade.ru

Внедрение шрифтов — 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.

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

Всего оставлено 9 комментариев

  1. Тормоз 15 июля 2009

    Ну да, проблемы рассмотрены, только вот непонятно, зачем нужны отличные от стандартна де-факто шрифты? 🙂 Ерунда это всё.

    К счастью, WEB постепенно движется к разделению оформления и содержания, и скоро довольно легко пользователь сможет привести большинство сайтов к виду, который именно ему наиболее удобен (часто это возможно уже сейчас).

    Сайт не должен навязывать пользователю своё оформление, этим желанием грешат лишь немного недоразвитые дизайнеры. Прошу прощения за резкость.

  2. SelenIT 15 июля 2009

    Никита, большое спасибо за статью, очень познавательно. Единственный момент — я не понял, каким образом указание диапазона юникода в @font-face позволяет экономить трафик? Ведь файл шрифта, как я понимаю, на сервере никак не парсится, а стало быть, в любом случае грузится целиком… Или это рассматривается как дополнение к сжатию WEFT-ом?

    P.S. “Представитель Майкрософта… Чемпион” — звучит 🙂

  3. Никита Вакорин 16 июля 2009

    @Тормоз

    С таким мнением невозможно согласиться. От шрифтов сильно зависят удобочитаемость и индивидуальность дизайна. А это очень важные факторы.

    Если есть желание, то в настройках браузера можно жёстко указывать по своему вкусу шрифты и цвета. Ну а если так сильно хочется отделить “оформление от содержания”, то можно полностью отключить CSS.

    “Сайт не должен навязывать пользователю своё оформление” — в данном контексте эти слова малокомпетентны. Например, мало пользователей задумываются, что по статистике шрифты с засечками улучшают скорость чтения, или, что существует понятие оптимальной длины строки.

    Поэтому нет необходимости называть дизайнеров многих продуманных сайтов “немного недоразвитыми”…

    @SelenIT

    В CSS3, unicode-range подгружает необходимый шрифт, основываясь на заданных параметрах юникода.

    В случае EOT, оригинальный файл шрифта разделяется по заданному набору. Но по примеру спецификации CSS3, как я понимаю, подразумевается, что изначально должно существовать несколько вариантов одного шрифта (для латиницы, для кириллицы, для математических формул…).

    То есть эта часть спеки ещё не в курсе, будет ли EOT поддерживаться и развиваться в качестве стандарта 😉

  4. Тормоз 16 июля 2009

    Никита, я не вижу связи между “многими продуманными сайтами” и внедрением нестандартных шрифтов в страницы. Ты можешь привести хоть один реально существующий пример, где это действительно оправданно?

    И много ли ты знаешь шрифтов, специально разработанных профессионалами для лучшего отображения на экранах (как Verdana, например)?

  5. SelenIT 16 июля 2009

    Перечитал спецификацию — похоже, как-то разбивать файл шрифта все-таки нужно. Я не думаю, что шрифты изначально будут поставляться разбитыми по юникодным модулям, скорее появятся инструменты навроде WEFT-а, но лучше, которыми вебмастера смогут вырезать из шрифта произвольный диапазон, не привязывая результат к определенному формату файла.

    Кстати, пока гуглил, обнаружил, что такой же синтаксис используется во Flex-е (я с ним не работал, поэтому это для меня новость). Но там нужный набор символов действительно вырезается из большого файла при компиляции…

  6. Никита Вакорин 16 июля 2009

    @Тормоз

    За примером далеко ходить не надо — картинки, вместо текста. CSS приближает времена, когда можно будет добиваться классных результатов прямо в браузере, со всеми вытекающими отсюда позитивностями, как для веб-разработчиков, так и для поисковых систем.

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

    @SelenIT

    Пока сложно определить то, как поведёт себя рынок. Возможно, произойдёт диверсификация, которая позволить покупать только определённый набор символов шрифта; соответственно за меньшие деньги.

  7. Никита Козин 22 июля 2009

    В хроме не работает, к сожалению.

  8. Вадим 28 июля 2009

    Спасибо за статью, теперь многое стало ясно, особенно про размеры шрифтов. Соглашусь с первым комментатором – эра веб 2.0 постепенно сменяется эрой веб 2.1 – когда пользователь участвует не только в наполнении сайта контентом, а и видоизменяет его визуально, пусть только для себя.. Ничто не стоит на месте, а Сеть и подавно!

  9. Роман 17 марта 2010

    спасибо за класную статью. обязательно воспользуюсь идеей

Поиск по сайту

Из последнего

Архив статей и записей