Что нужно знать о веб-шрифтах: часть 2
*** Из архива ***
Эта статья от 10 октября 2011 г. и больше не актуальна.
Джейсон Крэнфорд Тиг |
Наилучшая оценка, которую я получил, состоит в том, что существует около 150 000 цифровых шрифтов, по крайней мере, для полиграфического дизайна. Вы можете подумать, что до тех пор, пока вы можете конвертировать их в надлежащие форматы файлов, вы можете использовать любой из этих шрифтов в своем веб-дизайне. Однако на самом деле есть только около 40 000, которые вы можете использовать юридически в веб-дизайне.
Лицензионное соглашение с конечным пользователем (EULA) — это соглашение, которое вы заключаете о том, что вы можете на законных основаниях делать (и не делать) с определенной частью программного обеспечения — в данном случае с файлом шрифта. Хотя было бы неплохо думать, что это просто формальность, большинство шрифтов явно не позволяют вам загружать шрифт для использования на веб-странице с правилом @font-face, и, если это явно не указано, то это неявно незаконно.
Я оставлю это на ваше усмотрение, считаете ли вы это приемлемым, но имейте в виду, что дизайнеры шрифтов тратят месяцы, а часто и годы на разработку действительно хорошего шрифта. Это их интеллектуальная собственность, и они заслуживают вознаграждения за свою тяжелую работу.
Три источника веб-шрифтов
Существует три основных источника шрифтов, которые вы можете легально использовать в Интернете:
1. Преобразование . Вы можете взять файл шрифта, которым вы владеете или который вы создали, и использовать такой инструмент, как FontSquirrel @font-face Generator, чтобы преобразовать один файл во все различные форматы, необходимые для обеспечения полной кросс-браузерной поддержки.
Плюсы: Бесплатно. Когда вы выбираете, какой метод вы хотите использовать, важно помнить, что преобразование и покупка у розничных продавцов означает, что шрифт принадлежит вам и находится под вашим контролем. Вы обслуживаете его со своего собственного веб-сервера и имеете максимальный контроль.
Минусы: если вы не создали шрифт, у вас может не быть законных прав на это преобразование.
2. Розничная торговля . Растет число веб-сайтов, которые продают файлы шрифтов, предназначенные для Интернета, как правило, включая все необходимые форматы. Есть и бесплатные исходники.
Плюсы: Шрифт ваш; вы обслуживаете его со своего собственного веб-сервера, используете на любом количестве сайтов и имеете максимальный контроль.
Минусы: За шрифт нужно платить. Вам необходимо разобраться в технических тонкостях загрузки шрифтов на собственный веб-сервер. Вы должны знать о междоменных проблемах, которые затрагивают
3.
Бюро службы веб-шрифтов (WFSB). На самом деле вы никогда не владеете шрифтами и не имеете прямого контроля над файлами. Вместо этого вы платите лицензионный сбор, а затем указываете файлы шрифтов на сервере WFSB. Некоторые WFSB используют правило @font-face для добавления шрифтов, но чаще вы косвенно ссылаетесь на файл через связанный файл CSS или даже с помощью JavaScript. Подробнее об этом позже. 9Плюсы 0025: вам не нужно загружать шрифты или беспокоиться об обновлениях и междоменных проблемах. Вы знаете, что файлы шрифтов являются законными. Это также может снизить нагрузку на ваш сервер, потому что вы не доставляете файлы. Обычно это качественные шрифты. Рисунок 2. Когда вы арендуете шрифт, вы можете расслабиться и оставить тяжелую работу выбранным вами бюро веб-шрифтов.
Минусы: Вы отказываетесь от прямого контроля над файлом. Структура ценообразования сложна, и ее трудно сравнивать между WFSB. Большинство WFSB не предоставляют копии шрифтов, которые вы можете установить на свой компьютер, а это означает, что если вам нужно создать визуальные композиции, например, в Photoshop, вы должны купить отдельную лицензию для локальной копии.
Что искать в источнике веб-шрифтов
Ваша главная задача — найти продавца веб-шрифтов или WFSB, который предоставляет надлежащие форматы для поддержки всех браузеров: EOT, WOFF и форматы TTF или OTF. Некоторые сервисы также включают формат SVG, но, как объяснялось в первой части этой серии, я не рекомендую SVG.
Вам также следует выяснить, решает ли источник веб-шрифта проблему междоменной несовместимости Firefox. (См. предупреждение в «Что вам нужно знать о веб-шрифтах: часть 1»). Это проблема, из-за которой Firefox не отображает веб-шрифты, поступающие с сервера, отличного от того, на котором находится вызывающая веб-страница. Все WFSB, которые я перечислил в этой статье, не будут иметь этой проблемы, но нужно следить за появлением новых сервисов.
Помимо этих критериев, рассмотрите следующие вопросы при оценке потенциальных поставщиков шрифтов.
- Сколько веб-шрифтов доступно? Убедитесь, что шрифты поддерживают правило @font-face. Помните, что если это не указано прямо, шрифт не является законным веб-шрифтом.
- Какой код используется для встраивания шрифтов? Веб-шрифты встраиваются с использованием правила @font-face; WFSB часто заставляют вас использовать ссылку на внешний файл CSS или даже JavaScript для добавления кода.
- Можно ли использовать шрифт локально для создания визуальных композиций и руководств по стилю? Многие веб-проекты начинают свою жизнь как визуальные композиции, созданные в таких приложениях, как Photoshop или FireWorks. Однако без локальной версии шрифта вы не сможете создавать композиции с веб-шрифтами.
- Оптимизированы ли шрифты для экрана? Большинство шрифтов были разработаны для печати, а не для отображения на экране.
- Можете ли вы подмножить шрифт? Один из способов уменьшить размер файла шрифта — удалить ненужные глифы. Например, если ваш веб-сайт будет отображаться только на английском языке, но ваш шрифт включает буквы для французского, испанского, немецкого и русского языков, вы можете удалить символы, используемые для этих других языков. Это может радикально уменьшить размер файла и, таким образом, повысить скорость отображения.
- Можно ли сжать шрифт? Файлы шрифтов EOT, OTF и TTF могут быть заархивированы Gzip, чтобы значительно уменьшить размер файла, тем самым сократив время загрузки без ущерба для качества. (WOFF имеет встроенное сжатие, поэтому дополнительное сжатие не требуется.)
- Существуют ли ограничения на объем использования? Многие службы взимают плату в зависимости от использования полосы пропускания или количества просмотров страниц. Рассчитайте использование, чтобы найти лучший план для ваших нужд.
- Сколько стоит? Хотя тарифы часто зависят от использования, они сильно различаются от сервиса к сервису, и ни один из них не использует одинаковые тарифы.
(WOFF имеет встроенное сжатие, поэтому дополнительное сжатие не требуется.) Преобразование шрифтов
Повторяю: если в лицензии, прилагаемой к шрифту, прямо не указано, что преобразование является законным, то это не так. Если вы сомневаетесь, вы можете обратиться к владельцу лицензии, что обычно доступно в окне «Информация» в таких программах, как Apple FontBook и Extensis Suitcase.
Фактическое преобразование шрифта относительно просто.
Хотя существуют различные инструменты для преобразования шрифтов между форматами, самым простым и универсальным является генератор @font-face, предоставляемый на сайте FontSquirrel. Рис. 4. Генератор FontSquirrel @font-face.
Чтобы использовать генератор FontSquirrel @font-face на веб-сайте, который позволяет загружать файлы TTF или OTF, выберите один из нескольких вариантов настройки, в том числе:
- Basic: Конвертирует файлы шрифтов без излишеств.
- Оптимальный: Применяет функции оптимизации для улучшения качества и скорости шрифта.
- Эксперт: дает вам полный контроль над преобразованием, включая формат, синтаксис кода CSS, подмножество шрифтов, параметры открытого типа и подсказки PostScript, и многие другие.
Независимо от того, какой вариант вы выберете, в последнем поле вас попросят подтвердить, что шрифт «законно подходит для встраивания веб-шрифтов». Вы должны проверить это, чтобы продолжить, но любая ответственность лежит на ваших плечах.
Рисунок 5. Убедитесь, что конвертируемые шрифты разрешены для уличного использования.
FontSquirrel постоянно обновляет и совершенствует свой генератор @font-face, но компания предоставляет отличную документацию по обновлениям и тому, как использовать их продукт.
Покупка веб-шрифтов у розничных продавцов, плюс бесплатные шрифты
Очевидным преимуществом покупки шрифтов является то, что вы платите за файл один раз, а затем можете использовать его по своему усмотрению. Ну, почти. Когда вы покупаете шрифты или загружаете их бесплатно, файл шрифта становится вашим, и вы можете использовать его, как считаете нужным, в рамках лицензионного соглашения с конечным пользователем. Это мало чем отличается от покупки DVD. Большинство из нас думает о DVD как о своей собственности, и мы можем делать с ним все, что захотим. Однако, если вы внимательно прочитаете мелкий шрифт, вы, как правило, не сможете сделать с видео много вещей, например, показать его группам, превышающим определенный размер, или скопировать и перепродать его.
Однако большинство шрифтов, которые вы покупаете или загружаете бесплатно, имеют несколько ограничений: не перепродавайте их, не позволяйте другим людям использовать их без покупки собственной лицензии и, в некоторых случаях, не используйте их в качестве веб-шрифтов.
При покупке шрифтов для использования в Интернете ищите сайты, на которых четко указано, лицензирован ли шрифт для использования с @font-face. Многие используют четкую метку или значок, но в некоторых вам нужно копнуть немного глубже.
Рисунок 6. Сайты, на которых можно приобрести веб-шрифты или скачать их бесплатно. Нажмите на рисунок ниже, чтобы увидеть увеличенную версию.
А поскольку вы устанавливаете эти шрифты на свой компьютер, вы можете использовать их в Photoshop или Fireworks для создания визуальных композиций.
«Аренда» шрифтов у бюро веб-шрифтов (WFSB)
Использование бюро веб-шрифтов может избавить вас от многих проблем с веб-шрифтами, особенно если вы менее разбираетесь в технике.
Хотя у вас нет прямого контроля над файлами шрифтов, это означает, что у вас никогда не возникнет проблем с их загрузкой, не нужно беспокоиться о лицензии, это снижает нагрузку на ваш сервер, и велики шансы, что качество будет высоким. С другой стороны, большинство WFSB не предоставляют копии, которые вы можете использовать на своем компьютере, а это означает, что если вам нужно создавать визуальные композиции, вам нужно покупать отдельную лицензию для локальной копии. Однако недавно WebInk выпустила интересную функцию, помогающую решить эту проблему для своих шрифтов. Они создали подключаемый модуль для Photoshop, который позволяет вам использовать их шрифты (и их тысячи в визуальном наборе бесплатно, даже если вы не используете службу WebInk. Это означает, что вы можете экспериментировать с различными шрифтами в своем проекты, не платя за них
В разных WFSB используются разные методы встраивания шрифта. Вот как они обрабатывают код @font-face:
- @font-face (@ff): Позволяет вам напрямую добавить значение @font-face в ваш код. Это предпочтительный метод, так как он дает вам максимальный контроль над кодом, позволяя указать, какое имя семейства шрифтов будет в вашем коде.
- Ссылка (<ссылка>): использует ссылку на внешний файл CSS, расположенный на сервере WFSB. Это работает хорошо, но означает, что вы не можете назвать шрифт самостоятельно, и вам придется использовать имя семейства шрифтов, продиктованное WFSB. Однако, как я объяснял в предыдущей статье, рекомендуется называть шрифт на основе использования, а не фактического имени шрифта.
- JavaScript (
): использует внешний JavaScript для встраивания файла шрифта. В основном это делается для защиты файлов шрифтов от незаконной загрузки конечным пользователем, но это также позволяет настраивать их на лету. Однако, если у конечного пользователя отключен JavaScript, вам не повезло, и будут использоваться ваши дублирующие шрифты.
Это предпочтительный метод, так как он дает вам максимальный контроль над кодом, позволяя указать, какое имя семейства шрифтов будет в вашем коде.
Другая неприятная проблема с WFSB заключается в том, что никакие два не имеют одинаковой пропускной способности или структуры затрат, что затрудняет сравнение.