Генератор комплекта шрифтов для @font-face

Порой наскучивает однообразие шрифтовых гарнитур из «Core fonts for the Web» и тогда на помощь приходит замечательное CSS правило @font-face, позволяющее подключать свои шрифты к веб-страницам. Техника загрузки удалённых шрифтов впервые была представлена в спецификации CSS2 и на данный момент поддерживается всеми современными браузерами, но в некоторых посредством своего формата.
В этом посте я сделаю обзор инструмента, который поможет вам быстро подготовить комплект шрифтов (TTF, OTF, EOF, WOFF, SVG), и более того сделает за вас CSS файл, который останется только включить в основной документ.
Инструмент, о котором я уже начал рассказывать, называется @font-face Kit Generator. На вход он просит шрифты в TTF или OTF формате, причём количество входных шрифтов не ограничивается одной штукой, что очень удобно в том случае, когда необходимо подготовить комплекты из нескольких гарнитур по одинаковым правилам.
Прошу вас помнить о легальности использования тех или иных шрифтов в своих работах и перед употреблением обязательно ознакомьтесь с лицензией. Как только вы убедитесь в законности использования шрифта можно смело отмечать чекбокс напротив “Yes, the fonts I'm uploading are legally eligible for web embedding” („Да, шрифты загружаемые мной легальны для подключения к веб-страницам“).
Следующий шаг — выбор выходного формата файла шрифта. Подробнее о них можете почитать здесь, но самое важное различие для нас — рендеринг. TrueType сглаживается посредством субпикселей, а OpenType сглаживается анти-алиасингом. Последний, при кегле от 20 пикселей выглядит ровнее, в отличие от «рубленых» контуров у TrueType.
Далее встаёт выбор перед использованием альтернативных форматов шрифтов для разных браузеров. Под чекбоксами есть подписи, которые говорят сами за себя.
Следующая группа опций отвечает за отображение глифов, и эти настройки так же способны повлиять на конечный размер файла в меньшую сторону. В выпадающем списке есть три пункта, указывающие на то, что надо делать с хинтами. Вот что сказано в примечании по этому поводу: «Mac OS X обычно игнорирует хинтинг, но он значительно улучшает растеризацию в Windows. “Use Exisiting Hints” („Использовать Существующие Хинты“) принудит Генератор не изменять хинты. Если ваш шрифт уже захинтован, тогда оставьте этот параметр. Если сгенерированные шрифты плохо выглядят в Windows, попробуйте опцию “Make New Hints” („Сделать Новые Хинты“).»
“Simplify Outlines” („Упрощение очертаний“). Если вы имели дело с векторными редакторами, то в полной мере можете осознавать суть операции. Из примечания: «Это опция с потерями будет пытаться упрощать очертания глифов, тем самым снижая потенциальные проблемы и уменьшая размера файла. Рекомендуется только для „органически-выглядящих“ шрифтов. Всегда тестируйте, тестируйте, тестируйте!»
“Remove Kerning” („Удаление кернинга“). Очевидно, что это позволит уменьшить размер файла, но при этом может сильно «ударить» по визуальному восприятию букв в словах и в конце концов по удобочитаемости.
И последняя, очень ценная опция по настройке глифов, включаемых в итоговый набор. Иногда можно смело выкидывать десятки ненужных символов, которые с собой способны вынести лишние килобайты и даже мегабайты. Попробуйте самостоятельно почекать боксы, и в таблице ниже вы незамедлительно узреете результат. Если нужны конкретные глифы, которые невозможно скомбинировать «галочками», вводите их в поле “Single Characters” („Отдельные символы“).
Как только все настройки сделаны, скорее жмите “Download Your Kit” и архив с комплектом загрузится прямо к вам на локальный диск. Внутри вы увидите stylesheet.css и файлы шрифтов.
Так же в архиве лежит base64_stylesheet.css, его можно использовать для сокращения числа запросов к серверу, так как TTF файлы уже включены в текст файла и преобразованы в текст алгоритмом base64.

Бонус-видео: Андрей Гаргуль «Несистемные шрифты в вебе» с «12×12»

2 комментария:

  1. Анонимный24.03.2011, 2:19

    Видео в конце расстроило, конечно. Зря потраченные десять минут. Откуда такие дилетанты берутся.

    ОтветитьУдалить
  2. Cпасибо за информацию.

    ОтветитьУдалить