Во время работы на платформе Mac или Windows PC, вы постоянно используете шрифты. Начиная с графических дизайнеров, в чьих коллекциях насчитывается сотни, а то и тысячи шрифтов, и, заканчивая обычными пользователями, имеющими дело только со стандартным набором шрифтов операционной системы и приложений, все они их постоянно используют при создании документов, чтении материалов в Интернет и управлении интерфейсом пользователя. Понимание того, как отличаются основные форматы файлов шрифтов, поможет вам более широко их использовать и воспользоваться всем диапазоном типографских гарнитур.
Файлы формата TTF относятся к основному набору шрифтов Windows TrueType. С появлением последних версий Mac OS X, этот одноплатформенный формат шрифта стал общим и теперь присутствует на обеих доминирующих в мире операционных системах. Компания Apple немного видоизменила формат TrueType, подготовив его для замены устаревших растровых гарнитур на более гибкий стандарт и успешно ввела их в состав новой ОС.
Стандарт TrueType предусматривает использование единственного файла для описания шрифта, который содержит всю необходимую информацию для рендеринга (отрисовки) шрифта на экране дисплея и при его печати. Для сравнения с TrueType, скажем, что некоторые устаревшие типографические шрифты, такие как PostScript Type 1 (разработанный Adobe Systems), имеют намного более сложную и емкую для обработки компьютером конструкцию.
Стандарт OTF обозначает открытый тип шрифта (OpenType typeface) и основан на новейших технологиях построения шрифтов. Также как и TrueType, шрифты формата OpenType являются мультиплатформенными. Но, в отличие от предшественника, они позволяют поместить в одном файле сразу несколько стилей отображения и поддерживают набор символов на разных языках.
Более того, шрифты OpenType могут использовать разные стили гарнитур по выбору конкретных приложений, меняя их в зависимости от контекста. Этот новый стандарт дал в руки дизайнеров превосходную возможность конструирования шрифтов, похожих на рукописный стиль написания. В зависимости от конкретного шрифта OpenType, в основе его могут лежать алгоритмы построения кривых, взятые от TrueType или PostScript Type 1.
Стандарт DFONT (файлы с расширением DFONT) расшифровывается, как шрифт Datafork TrueType. Формат этого файла являлся стандартом для системных шрифтов операционной системы Mac OS X. Но, вместе с выходом ОС Mac OS X 10.6 Snow Leopard компания Apple заменила этот стандарт на коллекцию шрифтов TTC или TrueType Collection. Формат DFONT поддерживается исключительно под Mac OS X и обречен на «забвение», так как стать кроссплатформенным ему уже не суждено.
Другие форматы
Старые растровые шрифты имели существенные ограничения. Так, каждый из них мог использовать только три размера (высоты) в документах и для этого вам было необходимо прибегать к специальному приложению управления шрифтами. Эти ограничения были быстро отклонены графическим дизайнерами.
Шрифты формата PostScript Type 1 исключают подобный недостаток и прекрасно масштабируются при печати, но для этого принтер должен быть совместим с этим стандартом шрифта. Компания Adobe Systems, разработчик этого стандарта, впоследствии предложила использовать приложение Adobe Type Manager для снятия ограничений при выводе на печать.
Резюме файла OTF
У нас есть три существующие программные обеспечения, связанные с файлами OTF (как правило это программное обеспечение от Open Source , известное как FontForge ), и их можно отнести к категории основных типов файлов один. Традиционно эти файлы имеют формат OpenType Font . Большинство файлов OTF относится к Font Files .
Файлы OTF находятся на платформах мобильных устройств и настольных компьютеров, и их можно открыть в Windows, Mac и Linux. Рейтинг популярности данных файлов составляет «Низкий», что означает, что они не очень распространены.
Для получения дополнительной информации о файлах OTF и связанных с ними прикладных программных средствах, см. информацию ниже. Кроме того, далее также представлено основное руководство по устранению неполадок, которое позволит вам решить проблемы, возникающие во время открытия файлов OTF.
Популярность типов файлов
Ранг Файла
Активность
Этот тип файлов по-прежнему сохранил актуальность и активно используется разработчиками и прикладными программными средствами. Хотя оригинальное программное обеспечение этого типа файлов может отодвигаться на второй план более новой версией (например. Excel 97 против Office 365), этот тип файлов по-прежнему активно поддерживается текущей версией программного обеспечения. Этот процесс взаимодействия со старой операционной системой или устаревшей версией программного обеспечения также известен как «обратная совместимость ».
Статус файла
Страница Последнее обновление
Типы файлов OTF
Ассоциация основного файла OTF
Расширение OTF Файл шрифта тип файла, который разработан первоначально Microsoft затем приобретена Adobe. Формат файла шрифта является типом файла, который используется для хранения символов и символов. Расширение OTF Файл хорошо известны его использования для формата типа файла шрифта. Оба аспекта приписка и TrueType шрифтов формата объединен в OTF типа файла и является полностью масштабируемым, что означает, что тип шрифт не потеряет свое качество при изменении его размера. В 1996 году открытого типа впервые было объявлено и поддерживается Microsoft Windows и Mac OS X.
Попробуйте универсальное средство для просмотра файлов
В дополнение к продуктам, перечисленным выше, мы предлагаем вам попробовать универсальное средство для просмотра файлов типа FileViewPro. Данное средство может открывать более 200 различных типов файлов, предоставляя функции редактирования для большинства из них.
Лицензия | | Условия |
Устранение неполадок при открытии файлов OTF
Общие проблемы с открытием файлов OTF
FontForge не установлен
Дважды щелкнув по файлу OTF вы можете увидеть системное диалоговое окно, в котором сообщается «Не удается открыть этот тип файла» . В этом случае обычно это связано с тем, что на вашем компьютере не установлено FontForge для %%os%% . Так как ваша операционная система не знает, что делать с этим файлом, вы не сможете открыть его дважды щелкнув на него.
Совет: Если вам извстна другая программа, которая может открыть файл OTF, вы можете попробовать открыть данный файл, выбрав это приложение из списка возможных программ.
Установлена неправильная версия FontForge
В некоторых случаях у вас может быть более новая (или более старая) версия файла OpenType Font, не поддерживаемая установленной версией приложения . При отсутствии правильной версии ПО FontForge (или любой из других программ, перечисленных выше), может потребоваться загрузить другую версию ПО или одного из других прикладных программных средств, перечисленных выше. Такая проблема чаще всего возникает при работе в более старой версии прикладного программного средства с файлом, созданным в более новой версии , который старая версия не может распознать.
Совет: Иногда вы можете получить общее представление о версии файла OTF, щелкнув правой кнопкой мыши на файл, а затем выбрав «Свойства» (Windows) или «Получить информацию» (Mac OSX).
Резюме: В любом случае, большинство проблем, возникающих во время открытия файлов OTF, связаны с отсутствием на вашем компьютере установленного правильного прикладного программного средства.
Установить необязательные продукты - FileViewPro (Solvusoft) | Лицензия | Политика защиты личных сведений | Условия |
Другие причины проблем с открытием файлов OTF
Даже если на вашем компьютере уже установлено FontForge или другое программное обеспечение, связанное с OTF, вы все равно можете столкнуться с проблемами во время открытия файлов OpenType Font. Если проблемы открытия файлов OTF до сих пор не устранены, возможно, причина кроется в других проблемах, не позволяющих открыть эти файлы . Такие проблемы включают (представлены в порядке от наиболее до наименее распространенных):
- Неверные ссылки на файлы OTF в реестре Windows («телефонная книга» операционной системы Windows)
- Случайное удаление описания файла OTF в реестре Windows
- Неполная или неправильная установка прикладного программного средства, связанного с форматом OTF
- Повреждение файла OTF (проблемы с самим файлом OpenType Font)
- Заражение OTF вредоносным ПО
- Повреждены или устарели драйверы устройств оборудования, связанного с файлом OTF
- Отсутствие на компьютере достаточных системных ресурсов для открытия формата OpenType Font
Опрос: Какой тип файла вы используете чаще всего на работе / в школе?
Лучшие веб-браузеры
| Chrome | (58.80%) | |
| Firefox | (11.05%) | |
| Internet Explorer | (9.04%) | |
| Edge | (8.46%) | |
| Safari | (3.87%) |
Событие дня
Прекрасное среднее между малыми, потерями mp3-файлами и тем больше, без потери качества FLAC файлов, является AAC. Известный высокое качество аудио и небольшой размер файла, Advanced Audio Coding (AAC-файлы) являются обычным явлением на ITunes, но формат также может быть найден в другом месте.
Как исправить проблемы с открытием файлов OTF
При наличии на компьютере установленной антивирусной программы можносканировать все файлы на компьютере, а также каждый файл в отдельности . Можно выполнить сканирование любого файла, щелкнув правой кнопкой мыши на файл и выбрав соответствующую опцию для выполнения проверки файла на наличие вирусов.
Например, на данном рисунке выделен файл my-file.otf , далее необходимо щелкнуть правой кнопкой мыши по этому файлу, и в меню файла выбрать опцию «сканировать с помощью AVG» . При выборе данного параметра откроется AVG Antivirus, который выполнит проверку данного файла на наличие вирусов.
Иногда ошибка может возникнуть в результате неверной установки программного обеспечения , что может быть связано с проблемой, возникшей в процессе установки. Это может помешать вашей операционной системе связать ваш файл OTF с правильным прикладным программным средством , оказывая влияние на так называемые «ассоциации расширений файлов» .
Иногда простая переустановка FontForge может решить вашу проблему, правильно связав OTF с FontForge. В других случаях проблемы с файловыми ассоциациями могут возникнуть в результате плохого программирования программного обеспечения разработчиком, и вам может потребоваться связаться с разработчиком для получения дополнительной помощи.
Совет: Попробуйте обновить FontForge до последней версии, чтобы убедиться, что установлены последние исправления и обновления.
Это может показаться слишком очевидным, но зачастую непосредственно сам файл OTF может являться причиной проблемы . Если вы получили файл через вложение электронной почты или загрузили его с веб-сайта, и процесс загрузки был прерван (например, отключение питания или по другой причине), файл может повредиться . Если возможно, попробуйте получить новую копию файла OTF и попытайтесь открыть его снова.
Осторожно: Поврежденный файл может повлечь за собой возникновение сопутствующего ущерба предыдущей или уже существующей вредоносной программы на вашем ПК, поэтому очень важно, чтобы на вашем компьютере постоянно работал обновленный антивирус.
Если ваш файл OTF связан с аппаратным обеспечением на вашем компьютере , чтобы открыть файл вам может потребоваться обновить драйверы устройств , связанных с этим оборудованием.
Эта проблема обычно связана с типами мультимедийных файлов , которые зависят от успешного открытия аппаратного обеспечения внутри компьютера, например, звуковой карты или видеокарты . Например, если вы пытаетесь открыть аудиофайл, но не можете его открыть, вам может потребоваться обновить драйверы звуковой карты .
Совет: Если при попытке открыть файл OTF вы получаете сообщение об ошибке, связанной с.SYS file , проблема, вероятно, может быть связана с поврежденными или устаревшими драйверами устройств , которые необходимо обновить. Данный процесс можно облегчить посредством использования программного обеспечения для обновления драйверов, такого как DriverDoc .
Если шаги не решили проблему , и у вас все еще возникают проблемы с открытием файлов OTF, это может быть связано с отсутствием доступных системных ресурсов . Для некоторых версий файлов OTF могут потребоваться значительный объем ресурсов (например, память/ОЗУ, вычислительная мощность) для надлежащего открытия на вашем компьютере. Такая проблема встречается достаточно часто, если вы используете достаточно старое компьютерное аппаратное обеспечение и одновременно гораздо более новую операционную систему.
Такая проблема может возникнуть, когда компьютеру трудно справиться с заданием, так как операционная система (и другие службы, работающие в фоновом режиме) могут потреблять слишком много ресурсов для открытия файла OTF . Попробуйте закрыть все приложения на вашем ПК, прежде чем открывать OpenType Font. Освободив все доступные ресурсы на вашем компьютере вы обеспечите налучшие условия для попытки открыть файл OTF.
Если вы выполнили все описанные выше шаги , а ваш файл OTF по-прежнему не открывается, может потребоваться выполнить обновление оборудования . В большинстве случаев, даже при использовании старых версий оборудования, вычислительная мощность может по-прежнему быть более чем достаточной для большинства пользовательских приложений (если вы не выполняете много ресурсоемкой работы процессора, такой как 3D-рендеринг, финансовое/научное моделирование или интенсивная мультимедийная работа). Таким образом, вполне вероятно, что вашему компьютеру не хватает необходимого объема памяти (чаще называемой «ОЗУ», или оперативной памятью) для выполнения задачи открытия файла.
Попробуйте обновить память , чтобы узнать, поможет ли это открыть файл OTF. На сегодняшний день обновления памяти являются вполне доступными и очень простыми для установки даже для обычного пользователя компьютера. В качестве бонуса вы, вероятно, увидите хороший прирост производительности при выполнении вашим компьютером других задач.
Установить необязательные продукты - FileViewPro (Solvusoft) | Лицензия | Политика защиты личных сведений | Условия |
Шрифты TrueType можно масштабировать до любого размера, при этом они всегда будут четкими и легкими для чтения. Их можно присылать на любой принтер или другое устройство вывода, который поддерживается Windows.
Шрифты OpenType связанные со шрифтами TrueType, но обычно используют широкий набор основных символов, в частности уменьшенные заглавные буквы, цифры старого стиля и дополнительные фигуры (например, глифы и лигатуры). Шрифты OpenType можно масштабировать до любых размеров, при этом они четкие и легко читаются. Их можно присылать на принтер или другое устройство вывода, который поддерживается Windows.
Шрифты PostScript детализированные и отличаются высокими графическими характеристиками. Они используются для печати, особенно для профессионального высококачественной печати книг и журналов.
Какой шрифт выбрать
Это зависит от многих факторов. Если нужен шрифт, который легко читается на экране и бумаге, лучше выбрать шрифт TrueType .
Если нужен большой набор символов для использования языковых меток и типографской печати, следует использовать шрифт OpenType .
Для публикаций с профессиональным (например, глянцевый журнал) или промышленной печати выбирайте PostScript.
Привет, Хабр!
Уже написаны горы статей, описывающих разные стороны работы с веб-шрифтами, собрано множество работающих примеров, но каждый день мы продолжаем сталкиваться с элементарным непониманием того, что такое веб-шрифты. Не у всех есть время гуглить материалы по данной теме, поэтому я попробовал дать ответы на часто задаваемые вопросы. Этот материал будет интересен прежде всего тем, кто еще не углублялся в тонкости шрифтовых технологий.
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. Что еще влияет на отображение?
Иногда способ растеризации лучше задавать вручную. Например, в браузерах с движком Webkit можно использовать CSS-свойство -webkit-font-smoothing и включить вручную обычное сглаживание вместо субпиксельного, и наоборот. Есть и нетривиальные способы добиться от браузера смены способа растрирования, на хабре однажды предлагали .Нельзя забывать и про размер шрифта (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. Где взять хорошие веб-шрифты?
Каталог свободных шрифтов от GoogleFontsquirrel - известный конвертер и каталог веб-шрифтов
Myfonts - огромный магазин шрифтов с удобной системой оплаты
Fonts.com - главный конкурент MyFonts
Typekit - сервис для аренды шрифтов от Adobe
Typecast - вышеупомянутый магазин с сервисом тестирования
P.S. еще один полезный ресурс, который посоветовал , WebFont.ru Марии Дореули. Licensing. Внести ясность
Tim Brown. Type rendering on the web
Tim Brown. CSS properties that affect type rendering
Tim Brown. Type rendering: operating systems
Tim Ahrens. A Closer Look At Font Rendering
Tim Ahrens (Typekit). A closer look at TrueType hinting
The Benefits Of OpenType/CFF Over TrueType
Ильдар Киньябулатов, веб-дизайнер ADV/web-engineering
Каждый веб-дизайнер мечтает о создании сайта с красивой типографикой. Но, к сожалению, браузеры поддерживают лишь несколько гарнитур, так называемых «безопасных для веб» шрифтов. В стандартный набор входят следующие шрифты: Arial , Verdana , Times , Georgia , Courier New и несколько других.
Гарнитура определяет набор из одного или более шрифтов, каждый из которых состоит из символов, имеющих общие конструктивные особенности — вес, стиль, дизайн, начертание, плотность, размер, например, шрифты без засечек (или гротески), шрифты с засечками (антиква). Гарнитура состоит из набора знаков (цифры, буквы, знаки пунктуации, специальные символы, также может состоять из неалфавитных символов).
Шрифт — это набор символов конкретного размера, веса и стиля. Например, шрифт Times New Roman стиль italic размера 16px — это один шрифт, а Times New Roman стиль italic размера 10px — это уже другой.
Правило @font-face позволяет подключать разнообразные пользовательские шрифты. Браузер загружает шрифты в кэш и использует их для оформления текста на странице. Такой подход называется встраиванием шрифтов , а встроенные шрифты - веб-шрифтами .
Правило @font-face нужно размещать перед всеми остальными правилами css, так как этот прием улучшит производительность страницы. Загружаемые шрифты можно помещать в специальную папку fonts , созданную на сервере.
Чтобы подключить шрифт с помощью правила @font-face , нужно:
1) загрузить файл шрифта на сервер в нескольких форматах для поддержки всеми браузерами,
2) указать название шрифта, прописать ссылку на файл и задать описание шрифта,
3) добавить имя шрифта в свойство font-family элемента, который будет отображаться данным шрифтом.
@font-face { font-family: "WebFont"; src: url(WebFont.eot?) format("eot"), /* IE8+, знак? позволяет обойти баг в обработчике значения src */ url(WebFont.woff) format("woff"), /* все современные браузеры, IE9+ */ url(WebFont.ttf) format("truetype"); /* все современные браузеры */ } p {font-family: "WebFont", Arial, sans-serif; }
Этот код говорит браузеру отображать текст внутри элемента
Используя шрифт WebFont. Если браузер по какой-либо причине не сможет загрузить данный шрифт, он выберет подходящий из списка шрифтов. Он перебирает их в указанном порядке до тех пор, пока не находит шрифт, который сможет успешно использовать.
Внутри каждого семейства шрифта можно определить до девяти значений жирности (веса). Поэтому для каждого встраиваемого шрифта, а также для каждого начертания нужно задавать отдельное правило @font-face , т.е. нельзя объявить в одном правиле два разных шрифта или шрифт одного семейства, но разных стилей и веса.
@font-face { font-family: "WebFont"; src: url(WebFont.eot?) format("eot"), url(WebFont.woff) format("woff"), url(WebFont.ttf) format("truetype"); font-weight: bold; font-style: italic; } @font-face { font-family: "WebFont"; src: url(WebFont.eot?) format("eot"), url(WebFont.woff) format("woff"), url(WebFont.ttf) format("truetype"); font-weight: 400; font-style: normal; }
В общем виде для шрифта можно задать следующие свойства:
@font-face { font-family: "FontName"; src: url() format(" "); font-variant: ; font-stretch: ; font-weight: ; font-style: ; }
Если вы предполагаете, что на компьютере пользователя установлен данный шрифт и хотите, чтобы шрифт загружался только после проверки его наличия у пользователя, то можно воспользоваться значением local() для задания адреса:
@font-face { font-family: "WebFont"; src: local("WebFont"), url(WebFont.eot?) format("eot"), url(WebFont.woff) format("woff"), url(WebFont.ttf) format("truetype"); font-weight: bold; font-style: italic; }
Форматы веб-шрифтов
Свойство @font-face имеет хорошую поддержку в браузерах, но разные браузеры используют разные форматы шрифтов. Существуют четыре основных формата шрифтов:
Формат WOFF (Web Open Font Format), открытый сетевой формат шрифта, разработанный в Mozilla. Технически WOFF нельзя назвать форматом шрифта, так как он представляет собой лишь оболочку с функцией сжатия. Формат сжимает шрифты в формате TTF/OTF для использования их в интернете. Также, WOFF позволяет добавлять к файлу метаданные, например, сведения о лицензии.
Форматы OTF/TTF (OpenType Font и TrueType Font) работают в большинстве браузеров. Оба формата распространяются свободно.
Формат EOT (Embedded Open Type) создан разработчиками Microsoft, представляет сжатую копию шрифта TTF, повторное использование которого запрещается технологиями DRM (Digital Rights Management, цифровое управление правами доступа). Поддерживается только в IE, начиная с 8-й версии.
SVG/SVGZ (Scalabe Vector Graphics) — тип файлов шрифтов, представляющий векторное начертание шрифта. Как правило, имеет меньшие размеры файлов, тем самым позволяя улучшить производительность на мобильных устройствах. Работает в Opera Mobile и iOS Safari.
Сложности использования встроенных шрифтов
1) Файлы шрифтов могут быть больших размеров, поэтому в некоторых случаях добавление @font-face замедляет загрузку страниц.
2) С некоторыми шрифтами связаны лицензионные ограничения, не допускающие бесплатного использования.
3) Некоторые шрифты просто плохо смотрятся на веб-страницах.
