Что такое otf шрифт
В чем разница между OTF и TTF?
Каждый использует различные виды шрифтов в своей повседневной жизни, чтобы добавить стиль в свои документы. Каждый шрифт будет иметь разный тип формата, который будет иметь различное расширение. В большинстве случаев пользователи находят шрифты в формате OTF или TTF. Тем не менее, некоторые пользователи задаются вопросом о разнице между этими двумя. Поскольку оба этих формата шрифтов очень похожи друг на друга, между ними также есть различия. В этой статье мы поговорим о том, что такое OTF и TTF и в чем разница между ними.
Что такое файл OTF?
OTF-файл — это файл шрифта формата OpenType, разработанный совместно Adobe и Microsoft. Это новый стандарт для цифровых шрифтов, который поддерживает более продвинутые функции набора текста и большее количество языков. Шрифт OpenType можно использовать как в Windows, так и в MacOS без какой-либо конвертации. Шрифты OTF полностью масштабируемы, что означает, что размеры символов могут быть изменены без потери исходного качества. Он может содержать контуры TrueType или PostScript в обычной оболочке.
Что такое файл TTF?
TTF означает TrueType Font, это формат шрифта, разработанный Apple и Microsoft в конце 1980-х годов. Цель разработки этого формата шрифта состояла в том, чтобы просто иметь шрифт, который может работать как в MacOS, так и в Windows, а также на всех распространенных принтерах. Он содержит данные шрифта как на экране, так и на принтере в одном компоненте, что упрощает установку шрифтов. Поскольку это кажется идеальным типом формата шрифта, есть все еще некоторые ограничения на все дополнительные функции, которые вы можете сделать с ним. Также доступно для разработки новых шрифтов.
Разница между OTF и TTF?
Одним из основных отличий между OTF и TTF являются расширенные возможности набора текста OTF. Из-за этого OTF, скорее всего, будет лучшим шрифтом, чем TTF. Старые программы будут поддерживать только TTF, а не OTF. Шрифты TTF популярны и их гораздо проще создавать, чем OTF. Большинство бесплатных шрифтов, доступных в Интернете, будут в формате TTF. Когда дело доходит до выбора одного из форматов шрифта между этими двумя, ответ зависит от использования. Если вы используете шрифт в основном для мобильных устройств или веб-дизайна, то лучше выбрать TTF, однако, если вы используете его для разработки материалов для печати, тогда вам следует выбрать OTF. Для не дизайнеров и обычных пользователей компьютеров дополнительные функции OTF не будут иметь большого значения. Шрифты стиля TTF используют квадратичные сплайны Безье, тогда как шрифты стиля OTF используют кубические сплайны Безье.
Возможности шрифта OpenType
Формат шрифта OpenType
Формат шрифта OpenType является расширением формата шрифта TrueType®, добавляя поддержку для данных шрифтов PostScript. Формат шрифтов OpenType был разработан совместно корпорацией Майкрософт и Adobe Corporation. Шрифты OpenType и службы операционной системы, поддерживающие шрифты OpenType, предоставляют пользователям простой способ установки и использования шрифтов, будь то шрифты TrueType или CFF (PostScript).
Формат шрифта OpenType решает следующие задачи разработчика:
Расширенная поддержка многоплатформенности.
Улучшенная поддержка международных кодировок.
Улучшенная защита данных шрифта.
Меньшие размеры файлов, что повышает эффективность распространения шрифта.
Расширенная поддержка дополнительного типографского контроля.
Windows SDK содержит набор образцов шрифтов OpenType, которые можно использовать с Windows Presentation Foundation (WPF) приложениями. Эти шрифты обеспечивают большинство функций, приведенных в остальной части этого раздела. Дополнительные сведения см. в разделе Пакет образцов шрифтов OpenType.
Дополнительные сведения о формате шрифтов OpenType см. в спецификации OpenType.
Дополнительные типографские расширения
Расширенные типографские таблицы (Макетные таблицы OpenType) расширяют функциональные возможности шрифтов, используя контуры TrueType или CFF. Шрифты макета OpenType содержат дополнительную информацию, расширяющую возможности шрифтов для поддержки международного типографского оформления. Большинство шрифтов OpenType предоставляют только часть общего числа доступных функций OpenType. Шрифты OpenType предоставляют следующие возможности.
Широкое сопоставление между символами и глифами с поддержкой лигатур, позиционных форм, вариантов и других подстановок шрифтов.
Поддержка двумерного позиционирования и вложения глифов.
Явные сведения сценариев и языка, содержащиеся в шрифте, чтобы приложение обработки текста могло соответствующим образом настроить его поведение.
Макетные таблицы OpenType подробно описаны в разделе «таблицы файлов шрифтов» спецификации OpenType.
В оставшейся части этого обзора представлены широкие возможности и гибкость некоторых визуально интересных функций OpenType, предоставляемых свойствами Typography объекта. Дополнительные сведения об этом объекте см. в разделе Класс Typography.
Варианты
Варианты используются для отображения различных типографских стилей, например надстрочных и подстрочных знаков.
надстрочные и подстрочные
VariantsСвойство позволяет задать надстрочные и подстрочные значения для шрифта OpenType.
Следующий текст демонстрирует надстрочные знаки для шрифта Palatino Linotype.
В следующем примере разметки показано, как определить надстрочные знаки для шрифта Palatino Linotype с помощью свойств Typography объекта.
Следующий текст демонстрирует подстрочные знаки для шрифта Palatino Linotype.
В следующем примере разметки показано, как определить индексы для шрифта Palatino Linotype с помощью свойств Typography объекта.
Применение надстрочных и подстрочных знаков в декоративных целях
Надстрочные и подстрочные знаки можно также использовать для создания декоративных эффектов текста в смешанном регистре. Следующий текст демонстрирует надстрочный и подстрочный текст для шрифта Palatino Linotype. Обратите внимание, что заглавные буквы не затрагиваются.
В следующем примере разметки показано, как определить надстрочные и подстрочные индексы для шрифта с помощью свойств Typography объекта.
Capitals
Capitals — это набор типографских форм, которые отображают текст в прописных глифах. Когда текст отображается всеми прописными буквами, обычно расстояние между буквами кажется слишком маленьким, а плотность и пропорции символов слишком большими. OpenType поддерживает несколько форматов стилей для прописных букв, включая малые прописные буквы, капительные прописные буквы, заголовочные и прописные. Эти форматы стиля позволяют управлять внешним видом прописных букв.
Следующий текст демонстрирует стандартные прописные буквы, буквы в стиле SmallCaps и в стиле AllSmallCaps для шрифта Pescadero. В данном случае для всех трех слов используется один и тот же размер шрифта.
В следующем примере разметки показано, как определить прописные буквы для шрифта Pescadero с помощью свойств Typography объекта. При использовании формата SmallCaps начальные прописные буквы игнорируются.
Титульные прописные буквы
Титульные прописные буквы имеют меньшую плотность и пропорции и разработаны для придания более изысканного вида, чем при использовании обычных прописных букв. Титульные прописные буквы обычно используются в больших размерах шрифтов для заголовков. Следующий текст демонстрирует обычные и титульные прописные буквы для шрифта Pescadero. Обратите внимание на более узкие ножки в тексте во второй строке.
В следующем примере разметки показано, как определить Титульные прописные буквы для шрифта Pescadero с помощью свойств Typography объекта.
Интервалы прописных букв
Прописной интервал — это функция, которая позволяет обеспечить дополнительные интервалы при использовании в тексте только прописных букв. Прописные буквы обычно разрабатываются для использования вместе со строчными. Интервал между прописной и строчной буквами, который кажется вполне подходящим, может выглядеть слишком маленьким при использовании только прописных букв. Следующий текст демонстрирует обычный и прописной интервалы для шрифта Pescadero.
В следующем примере разметки показано, как задать прописные расстояния для шрифта Pescadero с помощью свойств Typography объекта.
Лигатуры
Лигатуры — это два (или более) глифа, превращающиеся в один глиф для создания более читаемого или привлекательного текста. Шрифты OpenType поддерживают четыре типа лигатур:
Стандартные лигатуры. Разработаны для улучшения удобочитаемости. Стандартные лигатуры включают fi, fl и ff.
Контекстные лигатуры. Разработаны для улучшения удобочитаемости путем обеспечения более эффективного поведения соединения символов, составляющих лигатуры.
Дискретные лигатуры. Предназначены для украшения и не разрабатывались для удобочитаемости.
Исторические лигатуры. Предназначены для исторических целей и не разрабатывались для удобочитаемости.
Следующий текст демонстрирует глифы стандартных лигатур для шрифта Pericles.
В следующем примере разметки показано, как определить стандартные глифы лигатуры для шрифта Pericles с помощью свойств Typography объекта.
Следующий текст демонстрирует глифы дискретных лигатур для шрифта Pericles.
В следующем примере разметки показано, как определить дискреционные глифы лигатуры для шрифта Pericles с помощью свойств Typography объекта.
По умолчанию шрифты OpenType в используются для Windows Presentation Foundation (WPF) включения стандартных лигатур. Например, при использовании шрифта Palatino Linotype стандартные лигатуры fi, ff и fl отображаются как глиф объединенных символов. Обратите внимание, что пары знаков для каждой стандартной лигатуры касаются друг друга.
Однако функции стандартных лигатур можно отключить, чтобы стандартные лигатуры, такие как ff, отображались как два отдельных глифа, а не как глиф объединенных символов.
В следующем примере разметки показано, как отключить стандартные глифы лигатуры для шрифта Palatino Linotype с помощью свойств Typography объекта.
Орнаменты
Swash-глифы являются декоративными глифами, которые используют сложную орнаментацию, часто связанную с каллиграфией. Следующий текст отображает стандартные и swash-глифы для шрифта Pescadero.
Орнаменты часто используются как декоративные элементы в коротких фразах, таких как объявления о событиях. В следующем тексте орнаменты используются для выделения прописных букв названия события.
В следующем примере разметки показано, как определить глифы для шрифта с помощью свойств Typography объекта.
Контекстные орнаментированные глифы
Некоторые комбинации орнаментированных глифов могут приводить к непривлекательному результату, например когда перекрываются подстрочные элементы на соседних буквах. Контекстные орнаментированные глифы позволяют использовать замещающий орнаментированный глиф, улучшающий внешний вид. Следующий текст показывает одно и то же слово до и после применения контекстного орнаментированного глифа.
В следующем примере разметки показано, как определить контекстные шлейфы для шрифта Pescadero с помощью свойств Typography объекта.
Варианты
Варианты — это глифы, на которые может заменяться стандартный глиф. Шрифты OpenType, например шрифт Pericles, используемый в следующих примерах, могут содержать альтернативные глифы, которые можно использовать для создания различных представлений текста. Следующий текст демонстрирует стандартные глифы для шрифта Pericles.
Шрифт OpenType Pericles содержит дополнительные глифы, предоставляющие стилистические варианты для стандартного набора глифов. Приведенный ниже текст отображает глифы с изменением стиля.
В следующем примере разметки показано, как определить стилистические альтернативные глифы для шрифта Pericles с помощью свойств Typography объекта.
Следующий текст демонстрирует несколько других стилистических вариантов глифов для шрифта Pericles.
В следующем примере разметки показано, как определяются эти другие стилистические варианты глифов.
Случайные контекстные варианты
Случайные контекстные варианты предоставляют несколько заменяющих глифов для одного символа. При реализации со шрифтами рукописного типа эта функция может имитировать рукописный ввод, используя набор случайно выбранных глифов с незначительными различиями во внешнем виде. В следующем тексте используются случайные контекстные варианты глифов для шрифта Lindsey. Обратите внимание, что буква «a» немного отличается.
В следующем примере разметки показано, как определить Случайные контекстные альтернативы для шрифта Lindsey, используя свойства Typography объекта.
Исторические формы
Исторические формы — это типографские соглашения, которые были приняты в прошлом. Следующий текст отображает фразу Boston, Massachusetts с помощью исторической формы глифов для шрифта Palatino Linotype.
В следующем примере разметки показано, как определить исторические формы для шрифта Palatino Linotype с помощью свойств Typography объекта.
Числовые стили
Шрифты OpenType поддерживают большое количество функций, которые могут использоваться с числовыми значениями в тексте.
Дроби
Шрифты OpenType поддерживают стили для дробей, включая косую черту и накопление.
Следующий текст демонстрирует стили дробей для шрифта Palatino Linotype.
В следующем примере разметки показано, как определить стили дробей для шрифта Palatino Linotype с помощью свойств Typography объекта.
Числа в старом стиле
Шрифты OpenType поддерживают формат чисел старого стиля. Этот формат используется для отображения чисел в стилях, которые уже не являются стандартными. Следующий текст демонстрирует дату 18 века в стандартном формате и в формате старого стиля для шрифта Palatino Linotype.
Следующий текст демонстрирует стандартные числа и числа в старом стиле для шрифта Palatino Linotype.
В следующем примере разметки показано, как определить старые цифры стиля для шрифта Palatino Linotype с помощью свойств Typography объекта.
Пропорциональные и табличные цифры
Шрифты OpenType поддерживают функцию пропорционального и табличного рисунка для управления выравниванием ширины при использовании цифр. При использовании пропорциональных цифр каждая цифра имеет свою ширину — например 1 будет уже, чем 5. Табличные цифры имеют одинаковую ширину, поэтому их можно выравнивать по вертикали, что повышает удобочитаемость финансовой информации.
В первом столбце следующего текста показаны два числа, использующие пропорциональные цифры и шрифт Miramonte. Обратите внимание на разную ширину цифр 5 и 1. Во втором столбце показаны те же два числа, ширина которых скорректирована с помощью функции табличных цифр.
В следующем примере разметки показано, как определить пропорциональные и табличные цифры для шрифта Miramonte с помощью свойств Typography объекта.
Перечеркнутый нуль
Шрифты OpenType поддерживают формат чисел с косой чертой ноль, чтобы подчеркнуть разницу между буквой «O» и цифрой «0». Числа с перечеркнутым нулем часто используются для идентификаторов в финансовых и деловых сведениях.
Следующий текст демонстрирует пример идентификатора заказа с использованием шрифта Miramonte. В первой строке используются стандартные цифры. Во второй строке используются перечеркнутые нули для лучшего контраста с прописной буквой O.
В следующем примере разметки показано, как определить ноль цифр для шрифта Miramonte, используя свойства Typography объекта.
Класс Typography
TypographyОбъект предоставляет набор функций, поддерживаемых шрифтом OpenType. Устанавливая свойства Typography в разметке, можно легко создавать документы, использующие преимущества функций OpenType.
Следующий текст демонстрирует стандартные прописные буквы, буквы в стиле SmallCaps и в стиле AllSmallCaps для шрифта Pescadero. В данном случае для всех трех слов используется один и тот же размер шрифта.
В следующем примере разметки показано, как определить прописные буквы для шрифта Pescadero с помощью свойств Typography объекта. При использовании формата SmallCaps начальные прописные буквы игнорируются.
Следующий пример кода выполняет ту же задачу, что и предыдущий пример разметки.
Свойства класса Typography
В следующей таблице перечислены свойства, значения и параметры по умолчанию для Typography объекта.
20 вопросов про веб-шрифты
Привет, Хабр!
Уже написаны горы статей, описывающих разные стороны работы с веб-шрифтами, собрано множество работающих примеров, но каждый день мы продолжаем сталкиваться с элементарным непониманием того, что такое веб-шрифты. Не у всех есть время гуглить материалы по данной теме, поэтому я попробовал дать ответы на часто задаваемые вопросы. Этот материал будет интересен прежде всего тем, кто еще не углублялся в тонкости шрифтовых технологий.
01. Зачем вообще нужны веб-шрифты, почему не обойтись стандартными?
Первое, что приходит на ум, стандартные шрифты ужасно приелись, а при их помощи трудно сделать что-то оригинальное. Как правило, большинство из них навевают тоску и уныние не только на пользователей, но и на веб-дизайнеров. Нестандартные шрифты в этом случае более выразительные и кроме того их на порядок больше, так что есть из чего выбрать. А еще, шрифт является неотъемлемой частью бренда, поэтому каждая компания стремится активнее его использовать, раз появилась такая техническая возможность.
И можно было бы вовсе отказаться от стандартных шрифтов, тем более, что многие мобильные ОС их не поддерживают (например, Arial, Taһoma, Verdana и Georgia). Но, к сожалению, индустрия, много лет подгоняемая под 96 DPI экраны и джорджии-верданы, оказалась не совсем готова к быстрым переменам, и на старых ОС Windows до сих пор возникают проблемы с отображением нестандартных шрифтов из-за особенностей механизма растеризации.
02. Как выбрать хороший веб-шрифт?
Шрифт — это не просто оцифрованный набор букв, созданный кистью на бумаге или в иллюстраторе, это еще и 98% доводки и полировки, хинтовки и тестирования на различных носителях и в разных размерах. Такой шрифт хорошо выглядит, его стиль отточен, с ним не возникнет проблем ни на принтере, ни на экране, от него веет добротностью.
Однако при выборе шрифта гораздо большее значение имеет даже не это, а целесообразность и соответствие шрифта способу использования и возложенным на него задачам. Если работаешь со шрифтами, нужно понимать, как все это работает, какие технологии используются. Это поможет не держать в голове кучу непонятных заученных правил, схваченных урывками. Например, каждый уважающий себя полиграфист знает, почему нежелательно использовать TrueType шрифты при офсетной печати, какие шрифты можно использовать в качестве текстовых, а какие — только для заголовков или указателей. Если он не будет этого знать, потом придется перепечатывать огромный тираж, а на работе его будут ждать постоянные сюрпризы и проблемы. Удивительно, почему к веб-дизайнерам никто не предъявляет никаких требований.
03. Как браузеры отрисовывают шрифты?
Довольно часто приходилось слышать, дескать, браузеры сами отрисовывают шрифты, поэтому везде выглядят по-разному. Но на самом деле, отрисовкой шрифтов занимается специальная графическая подсистема ОС: в Windows это GDI или DirectWrite, а на OS X и iOS — CoreText (а раньше QuickDraw). Всего есть 3 распространенных механизма растеризации (рендеринга) шрифтов: двухцветное (черно-белое) пиксельное, монохромное пиксельное (его еще часто называют antialiasing или обычное сглаживание) и субпиксельное. Субпиксельное использует особенность ЖК и плазменных дисплеев, где каждый пиксель разделен на 3 части (красную, зеленую и синюю), для того, чтобы увеличить горизонтальное разрешение отрисованной картинки и повысить четкость.
Однако браузеры действительно сами выбирают способ отрисовки, из тех которые предоставлены ОС. Например, в составе GDI есть 3 варианта рендеринга: ч/б, обычное сглаживание и субпиксельный ClearType. Особенность последнего в том, что сглаживание происходит только по горизонтали, в соответствии с расположением субпикселей. Именно поэтому при его использовании мы часто наблюдаем ужасные зубцы на горизонтальных и диагональных штрихах шрифта. К счастью, Microsoft начала потихоньку совершенствовать механизм, и на смену GDI пришла технология DirectWrite, где таки появилось сглаживание по вертикали. Сравните:
04. TTF или OTF?
TrueType и PostScript — изначально это были разные форматы шрифтов. В TrueType используются квадратичные кривые Безье, а в PostScript кубические кривые, хорошо знакомые дизайнерам, работающим в Illustrator и Photoshop. Сегодня оба способа описания кривых используются в составе одного формата OpenType, с той лишь разницей, что файлы с TrueType имеют расширение TTF, а с PostScript — OTF. У каждой из технологий есть свои особенности хинтинга и специфика применения.
Посмотрите на картинку. Если TrueType шрифт намного читабельнее в мелком кегле, но в крупном размере мы видим характерные зубцы, то для PostScript шрифта все ровно наоборот. Так происходит потому, что для PS и TT браузеры выбирают разные методы растрирования. Для PS браузер применил обычное монохромное сглаживание, а TT был обработан ClearType’ом. Вот и получается, что для текстовых шрифтов предпочтительнее будет TrueType, а для заголовков и крупных надписей лучше подойдет PostScript.
Еще мы видим, что пока DirectWrite используют не все браузеры. Так, его до сих пор нет в Google Chrome.
05. Что еще влияет на отображение?
Нельзя забывать и про размер шрифта (font-size). Форма контуров, контраст штрихов и читаемость могут сильно отличаться для разных кеглей. Отложите графический редактор и посмотрите, как веб-шрифт выглядит в браузере, в боевых условиях.
Еще один способ сгладить недостатки сглаживания — это управление цветом и контрастом. С целью ослабить эффект хроматического контура (при использовании ClearType проявляются желтые и пурпурные контуры по краям), можно попробовать ослабить тональный контраст, приблизив цвет фона к цвету текста. Сильно не увлекайтесь, помните о пользователях с ослабленным зрением.
06. Нужен ли веб-шрифтам хинтинг?
Хинтинг — это специальные инструкции, которые жестко привязывают абстрактные кривые шрифта к пикселям на мониторе. Абсолютное большинство шрифтов (в том числе коммерческих) — не хинтованные, потому что это довольно трудоемкая и сложная процедура. Для TrueType и PostScript хинтинг выполняется по-разному. Если вы берете дешевый шрифт, безопаснее формат OTF, потому что в TT процедура осталась неизменной со времен черно-белого растрирования и не совсем адекватная, а для PS процедура проще, и у автора есть возможность сделать автоматический хинтинг.
Шрифт без хинтинга при растрировании становится замыленным, а высота букв может скакать.
С одной стороны, шрифт с хинтингом довольно четкий, контрастный и равномерный, а с другой — формы букв искажаются в зависимости от кегля, а интервалы могут отличаться от реальных. Буквы строго подчиняются пикселям.
В ОС Windows мы видим, пожалуй, самый радикальный подход: такие популярные шрифты как Tahoma, Verdana, Arial и Georgia были отхинтованы специально под GDI ClearType, и когда появился DirectWrite, пришлось перехинтовывать и обновлять основные шрифты в комплекте ОС.
В отличие от Microsoft, Apple придерживается противоположного подхода, поэтому в ее операционных системах используются такие алгоритмы, которые позволяют более-менее качественно выводить любой шрифт, а хинтинг вообще не учитывается.
Отвечая на вопрос: стремительно приближается эпоха 300 DPI мониторов, а огромное количество мобильных устройств уже имеют такое разрешение, и скоро хинтинг будет вообще не нужен. Но так как Windows по-прежнему остается хинтингозависимой и ориентированной на мониторы с низким разрешением, в качестве текстовых шрифтов старайтесь выбирать качественно отхинтованные или стандартные, а иначе текст будет нечитаемым и трудным для восприятия.
07. @font-face или Cufon?
Как бы странно это не звучало, но есть еще люди, которые задают себе этот вопрос. Казалось бы, после того как браузеры начали поддерживать аттрибут @font-face, все остальные технологии встраивания шрифтов (Cufon, sIFR, Flash) вроде как должны были стать неактуальными. Но некий смысл все же остается, например способ замены шрифта изображением, когда на сайт выводятся не векторные кривые, а только отпечаток, как принтер отпечатывает его на листе или Photoshop выводит нередактируемый JPG. Это разрешено многими лицензиями на обычные (десктопные) шрифты. Некоторые производители шрифтов (например, Adobe) разрешают внедрять (в программы и на сервер) десктопный шрифт, если при этом он остается защищенным и его нельзя скачать. Если у вас нет возможности купить отдельную веб-лицензию, тогда можно применить подходящую для этого sIFR, когда шрифт встраивается с помощью флеш-объектов. Недостаток в том, что используется Flash, который поддерживается далеко не всеми устройствами. Еще можно использовать технологию Cufon (используется Canvas), если позволяет лицензия. Конечно, в данном случае скрипт будет громоздким, а выделение текста не работает, но в безвыходной ситуации подойдет.
Но лучше всего использовать @font-face, он и технологичнее, и удобнее, кроме того накоплен достаточный опыт для работы с ним. У него остается только один недостаток, что не все производители разрешают использовать свои шрифты в вебе.
08. В каких форматах должны быть файлы шрифта?
Подготовленные к внедрению ( @font-face) на сайт шрифты на сегодняшний день должны быть сразу в нескольких форматах:
TTF или OTF — привычный нам файл шрифта, но подгружаемый с сервера на время просмотра сайта;
WOFF — незащищенный архив исходника OTF или TTF, пожалуй, самый важный формат, который поддерживают большинство популярных браузеров, а файлы в WOFF обычно 2–2,5 раза легче, чем исходные;
EOT — внедряемый TT OpenType архив, имеющий механизмы защиты, нужен для поддержки старых браузеров Internet Explorer (начиная с IE8 кроме TrueType кривых, поддерживаются и PostScript);
SVG — для поддержки браузера Safari.
09. Можно ли конвертировать веб-шрифты?
Что бы вам ни говорили, нельзя просто переконвертировать файл и сохранить исходное качество шрифта, особенно, если изначально он был в формате OpenType. В процессе есть шанс потерять какие-то данные, вшитые в файл шрифта (скомпилированные инструкции, дополнительные знаки, метрики). Вы заметите это, когда при конвертации файл неожиданно «похудеет», особенно некошерно конвертировать TrueType в PostScript и обратно.
Кроме того, процесс конвертации почти всегда противоречит условиям лицензии, запрещающей модификацию. Проще говоря — это то же воровство. Когда вы забросите файлы в конвертор, будьте уверены, он не пропустит их и выдаст предупреждение, потому что в файле содержатся цифровые подписи производителя и соответствующие запреты на модификацию.
10. Сколько должны весить веб-шрифты?
Прежде чем отобразить страницу, браузер должен полностью загрузить файлы шрифтов. Может быть, вам приходилось видеть эффект «font flash» (или FOUT), когда на короткое мгновение вместо экзотических шрифтов успевают вспыхнуть стандартные шрифты системы. Нормально, если TTF (OTF) укладывается в 100 кб, а WOFF (EOT) в 50 кб. Всегда задумывайтесь о том, нужно ли вам вообще использовать нестандартные шрифты, даже если вы используете его в 1 коротком заголовке, все равно придется загружать весь файл шрифта целиком.
Чем больше в дизайне перфекционизма, тем меньше могут весить файлы шрифта, и старайтесь выбирать простые формы. В этом смысле, идеальная форма — это открытый геометрический гротеск с малым контрастом. Для ускорения загрузки шрифта, также бывает полезно включить его в файл стилей с помощью data:uri.
11. Сколько начертаний шрифта можно использовать в вебе?
С точки зрения дизайнера, много начертаний — это круто. И действительно, для заголовочка — Bold, а вон там, для врезочки — ExtraLight, ненужные текстики вообще запихнем и запрессуем в Condensed Bold. Вот оно — настоящее богатство и стилистическое разнообразие. Но когда все это «богатство» начинают переносить на сайт, выясняется, что все жутко тормозит. И лучше даже не пытаться открыть такой сайт с мобильного устройства. А еще, не забываем, что каждое начертание стоит отдельных денег, и вполне вероятно, что заказчик попросит вас или найти шрифтовой синоним, или уменьшить количество начертаний, только бы не покупать всю дорогую гарнитуру. Нормально использовать максимум 2-3 начертания одной или разных гарнитур.
12. Нужно ли ограничивать набор символов?
Ответ на этот вопрос, зависит от того, что это за сайт и как он будет использоваться. Ограничения могут быть полезны, потому что есть возможность значительно уменьшить объем файлов. Иногда из-за незнания, разработчики грузят на сайт тяжеленные файлы шрифта с его полным набором знаков, и хорошо, если там нет иероглифов (к сведению, шрифт Arial Unicode содержащий большую часть символов из таблицы Юникод весит 22 мб).
Тем, кто делает англоязычные сайты проще всего, им вообще не нужно грузить дополнительные знаки, достаточно тех, что есть в Basic Latin (или ASCII). Если вы используете шрифт только для заголовков на русском языке + вкрапления английского, то вам будет достаточно наборов ASCII (Basic Latin) и 64 символа русского алфавита, совсем не обязательно грузить набор Cyrillic Extended из 420 символов. Совсем другая история, если ваш сайт многоязычный, в этом случае во избежание некорректного отображения символов нужно постараться охватить все используемые языки.
13. Можно ли использовать шрифтовые клоны?
Бывает, что купить оригинал шрифта или слишком дорого, или вообще невозможно, вот тогда будет уместно подобрать шрифтовой синоним (клон). Конечно, от них не стоит ждать потрясающего качества, даже если они сделаны, скажем, именитой российской фирмой. Совсем все плохо, когда вам попался опус какого-нибудь анонимуса-грамотея, решившего опробовать себя на новой ниве, таких шрифтов остерегайтесь. Вот примеры клонов (в скобках указан оригинал): FreeSet (Frutiger), Pragmatica и Helios (Helvetica). Обратите внимание, что формы букв могут отличаться. Большое количество клонов есть в справочнике шрифтовых синонимов Паратайпа.
14. Как протестировать шрифт?
Дизайнеры, не привыкайте видеть шрифты только сквозь окна фотошопа, графические редакторы используют свои методы сглаживания текстов, и вы можете быть обмануты красивой картинкой. Гораздо полезнее научиться тестировать и смотреть их в браузерах. Если есть демонстрационная страница, обязательно убедитесь, что при рендеринге не вылезают всевозможные артефакты и спайки. Есть еще такой инструмент как Typecast, где можно проверить многие шрифты, а потом показать страницу клиенту. Для тех, кто выбирает новый шрифт для уже готового сайта — незаменимый для вас сервис Web Fonts Previewer, вы сможете протестировать любой шрифт на живом работающем сайте, так, как будто вы уже его внедрили.
15. У меня на компе есть шрифт, можно ли его использовать на сайте?
Сначала немного о воровстве. Я знаю много дизайнеров, у которых на компе тысячи шрифтов, происхождение которых никому не ведомо. Как правило, просто скачали из интернета. Но почему-то никто не задумывается, что создание хороших шрифтов — это месяцы, а иногда и годы серьезной работы! Но не только поэтому нельзя использовать паленые, непонятно откуда взятые шрифты, а потому что вы можете столкнуться с серьезными трудностями на этапе разработки.
Если вы хотите встроить в сайт шрифт, который идет в составе операционной системы, вы сможете это сделать только растрируя или используя его в изображениях. Если же вам очень нужно встроить, тогда нужно будет купить отдельную лицензию, точно так же, как и обычные шрифты (и Georgia, и Tahoma есть в продаже).
16. Как купить веб-шрифт?
Когда вы «покупаете шрифт» — это ближе всего к покупке ПО, когда вы получаете лицензию на его использование, а не права на сам файл программы. Получается, юридически скомпилированный файл шрифта — это программа. Модификация и изменение, если этого не разрешает лицензия, рассматриваются как нарушение авторского права.
Удобный способ покупки шрифтов — через каталоги шрифтов (Fonts.com, MyFonts, Ascender, Typekit). Вы сможете просмотреть, сравнить и выбрать один из имеющихся вариантов использования, оплатить картой. Для компаний проще всего будет напрямую связаться со студией-производителем или же предоставить покупку шрифтов заказчику
А может быть вообще лучше не тратить деньги на шрифт? Существует множество замечательных бесплатных шрифтов, которые ни в чем не уступают платным!
17. Какие бывают лицензии?
Существуют разные типы шрифтовых лицензий, и с появлением веб-шрифтов их разнообразие только увеличилось. В реальной жизни, каждая компания сама устанавливает правила игры, и лицензия шрифта может содержать в себе признаки разных других. Нас будут интересовать типичные.
Обычная коммерческая лицензия ограничивает использование на определенном количестве устройств и допускает распространение работ, созданных с использованием шрифта. Это могут быть журналы, газеты, листовки, визитки, растрированные изображения шрифта, — все вместе можно назвать их отпечатками. Эта лицензия не подходит для кино, телевидения, веба и встраивания в приложения и программы, такие права нужно выкупать отдельно.
Есть еще специфические лицензии, например: лицензия с исключительными правами. В данном случае компания выкупает у шрифтовиков все права, и даже автор шрифта не в праве его где-либо использовать. Особенно удивляет, когда такие шрифты находятся на торрентах, или когда ими пользуются какие-нибудь сторонние дизайнеры.
Свободные лицензии (public domain) — автор шрифта допускает свободное распространение, с условием указания своего имени (Creative Commons) или без него (например, OFL, GPL, Apache 2.0). Этот тип лицензии допускает даже коммерческое использование, кроме продаж и платного распространения. Примеры: PT Sans, Opensans, Droid. Иногда разрешается модификация шрифта (GPL), но созданная вами модификация автоматически наследует такую же лицензию (то есть, вас тоже могут форкнуть). Свобода предполагает, что можно использовать на любых носителях, в т.ч. и веб.
Свободные для некоммерческого использования — то есть, вы можете использовать его во всех случаях, когда не заработаете на этом. Допустим, для обучения, хобби и общественных проектов. Иногда, производители разрешают использование для дизайнеров, в надежде на то, что счастливый клиент дизайнера потом купит коммерческую версию шрифта.
Подробнее про лицензии можно прочитать в статье Эмиля Якупова Практические и юридические аспекты шрифтового бизнеса.
18. В чем отличие лицензий для веб-шрифтов?
Веб-лицензии — наши самые любимые, они либо является дополнением к основной лицензии, либо даются отдельно. Регулирует частный случай — использование шрифтов на сайтах. Как правило, самое главное ограничение — на количество просмотров страниц. Например, 10 тыс в месяц, 100 тыс или 1 млн. То есть, чем больше людей посещают ваш сайт, тем больше вы платите за лицензию. Есть и безлимитные варианты, когда вы платите за шрифт 1 раз, но они во много раз дороже. Наверно, задались вопросом, а следит ли кто-то за количеством просмотров? Чаще всего нет. Но не забывайте, что огромное количество счетчиков отслеживают трафик вашего сайта и, вызвав подозрение продавца, вы можете лишиться лицензии.
И еще, отдельная веб-лицензия не разрешает использование на обычных компьютерах. Иногда веб-лицензия выдается бесплатно, то есть одновременно с покупкой десктопного шрифта вы получаете право использовать и его веб-версию. Но это пока редкость, абсолютное большинство производителей требует дополнительную плату.
После покупки вы получаете специальные файлы, которые встраиваете в сайт (TTF, OTF, WOFF, EOT), и некоторые шрифты не разрешают размещать данные файлы на сайте в незащищенном виде, так как теоретически третьи лица могут заполучить сами файлы шрифтов. Третий вариант – вы используете специальный веб-сервис производителя шрифтов, например как Typekit, принадлежащий компании Adobe, и платите абоненскую плату.
19. Где взять хорошие веб-шрифты?
Каталог свободных шрифтов от Google
Fontsquirrel — известный конвертер и каталог веб-шрифтов
Myfonts — огромный магазин шрифтов с удобной системой оплаты
Fonts.com — главный конкурент MyFonts
Typekit — сервис для аренды шрифтов от Adobe
Typecast — вышеупомянутый магазин с сервисом тестирования
P.S. еще один полезный ресурс, который посоветовал ilyaerin, WebFont.ru
20. Что еще можно почитать про веб-шрифты?
Ильдар Киньябулатов, веб-дизайнер ADV/web-engineering