Формат woff что это
Веб-шрифты на распутье
Перевод не претендует на 100%-ную точность, но я постарался максимально точно передать мысли и слог автора. Комментарии приветствуются.
Начиная с Интернет Эксплорера 4 в 1998-ом, а затем с марта 2008-ого и до марта 2010-ого, один за другим, вся «большая пятерка» десктопных браузеров — Сафари, Файрфокс, Опера и Хром — выкатили сравнительно похожие реализации правила @font-face для привязки шрифтов. Вместе с тем, неотъемлимая часть веб-издательского паззла, часть, которой не хватает с начала Веба, встала на место и теперь настоящая, веб-ориентированая типографика начинает принимать форму.
WOFF был официально добавлен в W3C Fonts Working Group 8-ого апреля, 2010 года. Microsoft неожиданно спонсировала его внесение вместе с Opera и Mozilla. Поддержка WOFF заявлена в тестовых билдах IE9 для разработчиков. WOFF будет стандартом “транспорта” для шрифтов. Поддержка WOFF уже реализована в Firefox 3.6+, и разработчики Chrome анонсировали поддержку WOFF в ближайшем будущем.
К сожалению WOFF был разрекламирован способами, которые могут ввести в заблуждение. Давайте на секунду остановимся, так как важно знать чем является WOFF и что не менее важно, чем он не является.
Как и его старший брат, EOT (Embedded Open Type), WOFF файл является по сути архивированым файлом шрифта. Он не является шрифтовым форматом, сам по себе. Это файл шрифта, который «собрали в дорогу». Как PNG и JPEG для BMP и TIFF, так и WOFF для TTF и OTF. (В отличии от сжатого изображения, оригинальный шрифт может и должен быть распакован из сжатия.) На практике, WOFF и EOT очень похожи и соотношения сжатия для них более-менее одинаковы.
WOFF это не магический формат шрифта, который раз и на всегда сломит все препятствия на пути лицензирования коммерческих шрифтов. Страхи производителей шрифтов относительно веба гораздо более сложны и скоро мы с ними разберемся в связи с FHOS.
IE9 и DirectWrite
IE9 использует Windows DirectWrite API для отрисовки шрифтов. Если вы еще не скачали предпросмотровую версию IE9 я рекомендую вам попробовать, это может вас приободрить. Проведя некоторое время с IE9 preview, вы не захотите возвращаться к IE8 и XP. (Mac-юзеры, не ржать.) Отрисовка шрифтов в IE9 это нечто гораздо большее, чем мы ожидали. Несомненно на уровне с Маком, а в некоторых случаях даже лучше. Каково бы не было ваше мнение, разница сократилась значительно. Одним из отличных побочных эффектов фокуса на веб-шрифтах стало заострение внимания на том, как желание отрисовки шрифтов в браузерах под Windows сравнивается с отрисовкой в браузерах на OS X. Обратите внимание на то, что DirectWrite является Windows API, а не специфично для IE, и другие браузеры, такие как Firefox тоже реализуют его.
IE9 и @Font-Face с помощью CSS3
Удивительно, но то что делает @font-face годным кросс-браузерным решением сегодня, это то что IE поддерживает @font-face уже более десяти лет. Тем не менее, IE9 будет первой реализацией @font-face так как описано в спецификации CSS3.
Вот основные изменения:
Форматы шрифтов
Дополнительно к TrueType (TTF) шрифтам, IE9 будет поддерживать PostScript-приправленные OTF CFF шрифты, так же как и “большая пятерка” браузеров. Удаление этой преграды для совместимости само по себе очень хорошо, но с предупреждением: только если в интересах обратной совместимости для IE 6–8, это произойдет за несколько лет до того как веб-шрифты перестанут быть TrueType. IE 6–8 будут поддерживать только TrueType шрифты, запакованные как EOT. Кроме этого есть и другие проблемы отрисовки в браузерах под Windows, о которых надо помнить.
Остается надеяться что дизайнеры шрифтов помогут в этом, создавая свои шрифты доступными в TrueType с адекватным TrueType хинтингом. Либо, как вполне серьезно предложил мне один дизайнер шрифтов, все должны воздержаться от использования веб-шрифтов, пока IE8 не уйдет со сцены. Ха! Слишком поздно.
Синтаксис
Обратите внимание на то, что селекторы font-weight и font-style имеют различные значения внутри @font-face правила от тех же селекторов вне правила в основной таблице стилей. Внутри декларации, font-weight: bold означает, “это жирный участик этого семейства шрифтов;” вне декларации font-weight: bold означает, “применить жирность к этому тексту, с помощью участника этого семейства шрифтов, который декларирован как жирный.”
В IE6–8 @font-face работает тем же способом. Однако для того, чтобы EOT-файлы работали правильно, некоторые наименования и описательная информация внутри TTF-файла из которого создан EOT, должны совпадать с CSS декларацией. В большинстве случаев это не проблема. Но иногда, некоторые поля внутри таблиц данных шрифта должны быть изменены. В случае необходимости, все проблемы изучены и легко могут быть исправлены. (Подробности в документации для EOTFAST.)
Инструментарий для Веб-шрифтов
Необходимый инструментарий, которым должны обладать веб авторы:
Font Squirrel Генератор
Генератор это набор онлайн-инструментов, предлагающий конвертацию, очистку, генерирующий CSS стили и так далее. На данный момент, это лучшее что есть в сети и в руках дизайнера шрифтов и веб-разработчика Ethan Dunham только продолжает улучшаться.
EOTFAST
Разработан мной и Филлипом Тейлором из Кембриджа, EOTFAST является бесплатной и простой для использования альтернативой Майкрософтовскому конвертору, WEFT. Используйте EOTFAST для создания оригинально сжатых EOT файлов, совместимых с IE 6–8 и более быстрой загрузкой страницы. Обратите внимание на то, что EOT формат не был признан нерекомендованным и будет продолжать работать во всех режимах рендеринга в IE9, создавая тем самым легкий путь работы со всеми версиями IE, не прибегая к условным комментариям.
Доверительные лицензии
Доверительные лицензии—шрифты по оптовой цене, которые предоставляются в виде устанавливаемых TTF или OTF файлах для упрощения разработки, на равне с публикацией на веб-серверах — доступны в Font Spring. Этот сайт предоставляет, как каждый подобный сайт должен был бы, образцы шрифтов, так что вы в действительности видите то товар, перед тем как покупаете его. Надеюсь, остальные подобные сервисы примут эту простую модель лицензирования за основу.
Шрифтохранилища и «маскирующие» сервисы (FHOS)
Заботы создателей коммерческих шрифтов гораздо глубже, чем сценарий ситуации когда посетитель сайта видит понравившийся ему шрифт, роется в CSS и скачивает его. Позвольте мне предложить объяснение, чтобы вы могли лучше понять почему существуют сервисы шрифтов, использующие «маскировку», а в некоторых случаях и запутанные, и тупые лицензионные соглашения.
Производители шрифтов видели что произошло с индустрией музыки, книг, газет, журналов и банков изображений и они бояться что то же самое произойдет с ними. Это называется iTunes Effect, and it’s about price.
Дизайнеры шрифтов все еще очень сфокусированы на принте. В общем, основные деньги находятся в обслуживании профессиональных клиентов в индустрии печати: книги, журналы, художественное оформление и так далее. Цены обычно варьируются в зависимости от количества пользователей продукта. Основной их страх в том, что как только шрифты появятся в сети, они станут продуктом широкого потребления, существующая бизнес-модель рухнет и произойдет обесценивание шрифтов. Дизайнеры шрифтов боятся того, что не смогут запросить с клиента, скажем, 420$ за четыре семейства шрифтов для 6-10 пользователей, в мире где шрифты предоставляются на сайтах для «условно» неограниченного количества посетителей, которые вобще ничего не должны платить за это. Что если интернет снижает цены в секторе печати и сам по себе фактически не генерирует дохода?
Предостережение покупателям
В ответ на «интернет угрозу», некоторые коммерческие дизайнеры шрифтов выбрали шрифтохранилища и «маскирующие» сервисы. По существу, эти сервисы используют модель Amazon Kindle, но вместо книг вы получаете то, из чего сделаны книги — шрифты. Они раздаются отмереным, контролируемым путем так, что создатели шрифтов занют куда каждый из шрифтов идет и кем используется. Маскировка фокусируется на предотвращении обычного скачивания и возможности создания устанавливаемого в операционную систему шрифта, и поэтому шрифт становится недоступным для работы в таких програмах как InDesign. Основная задача подобных сервисов — удержать семейства шрифтов в своих руках.
Увеличение дискуссий между предтавителями производителей шрифтов, такими как Microsoft, Adobe, Monotype Imaging и другими, в следствии появления Typekit’а в прошлом году, в последние месяцы привело к созданию таких маскирующих сервисов какMicrosoft’s font distribution proxy, Ascender Corp, Extensis (специалисты в програмном обеспечении для управления и лицензирования шрифтов), Monotype Imaging, и коллектив, включающий Font Bureau от David Berlow.
Я могу сказать вам что ребята из Extensis, Ascender и Monotype счастливы и полны энтузиазма предоставлять шрифты для веба. Но они уж точно не будут спешить рассказывать вам, что система распространения этих шрифтов создана в ограничениях умной, но «грязной» DRM-подобной структуры. Это понятно. Но попытки идентифицировать и предотвратить случаи нелицензированого распространения через код доказали свою нецелесообразность фактически для всех и в перспективе, все попытки маскировки шрифтов выглядят тщетными и нецелесообразными.
Дизайнер шрифтов Ray Larabie выразил это лучше всех:
Защита шрифтов от установки в операционную систему, в то время когда изпользование шрифтов где либо, кроме веба, является признаком ретроградства, выглядит нелепо и глупо. Установить шрифты в свою ОСь? Да пожалуйста, дедуля! В ближайшем будущем никто и не захочет устанавливать шрифт в операционную систему.
Покупатель, будь благодарен
Как обычно, есть и обратная сторона. Можно рассматривать FHOS как фазу. Сервисы все время обновляются. Например WebINK сервис от Extensis бесплатный устанавливаемый «мастер предпросмотра» шрифтов Type Drawer, который позволяет, среди прочего, мнгновенно менять определенные шрифты на странице, просто перетаскивая их. Это позволяет сэкономить кучу времени и это то, что нужно дизайнерам в работе. На данный момент это проприетарная разработка WebINK, но она формирует направление развития сервисов.
Проверочный список сервисов шрифтов
Что касается меня, я фокусируюсь на предоставлении информации для разработчиков. И как веб-автор, теперь, когда я не должен полагаться на операционную систему в плане шрифтов, разве что как резерв, я чувствую себя некомфортно с мыслью о том, что такая базовая и фундаментальная часть дизайна моего сайта, как шрифт, будет контролироваться внешней сущностью. Далее, ни один независимый веб-дизайнер, с которым я говорил об этом, ни при каких обстоятельствах не согласен хомутать клиента постоянным расходом на шрифты.Есть тысячи бесплатных шрифтов и многие из них такогоже качества или даже выше, чем те, которые предлагают FHOS сервисы.
Расширеные функции OpenType
С того момента, как John Daggett из Mozilla возглавляет CSS3 Fonts Module, впечатляющая команда приглашенных экспертов в дизайне типографики обдумывает проблемы передовой типографики в W3C.Уже в ближайшее время это может иметь большое влияние на отображение математических символов и не-латинских языков.
Будущее Flash Text Replacement
Библиотека шрифтов Google
Благодаря неожиданной разработке, которая произросла из неформальных разговоров с ребятами из Typekit, Google стал провайдером свободно лицензированых шрифтов через Google Ajax API. Это опенсорсный проект в котором можно найти документацию, примеры и информацию о том, как можно способствовать его развитию в GitHub репозитории.В отличии от многих опенсорсных проектов, у этого есть постоянный куратор Raph Levien.
Заставим это работать сегодня
А теперь давайте окончательно запутаемся: для IE 6–8 вы можете использовать только TTF шрифты, обернутые как EOT или EOT “Lite” (несжатый). Для Firefox, Opera, Chrome, и Safari, вы можете использовать TTF или OTF файлы, как “сырые” или в некоторых случаях обернутые в WOFF файлы или как data URI внутри файла стилей. SVG будет основным форматом шрифтов, идущим вперед, но его основная добродетель сегодня заключается в поддержке в мобильном Safari для iPhone и iPad.
Да, это путает. Сначала. Всегда есть большие изменения. Но я ожидаю от веб-авторов сделать то, что они всегда делают. Найти путь заставить это все работать. Сырые материалы здесь и здесь. Инструменты здесь и здесь. Решения здесь и здесь. Так сложите вместе несколько страниц примеров и темплейтов, и приготовьтесь к распутью. Время пришло.
Translated with the permission of A List Apart Magazine and the author[s].
Расширение файла WOFF
Web Open Font Format
Что такое файл WOFF?
Популярность файлов WOFF
Дизайн формата WOFF
Формат WOFF был разработан с двумя целями. Первая цель состояла в том, чтобы отличить шрифты для веб-сайтов от тех, которые используются локально установленными приложениями, которые используют шрифты, установленные на локальном диске. Вторая цель состояла в том, чтобы уменьшить задержку веб-шрифтов при передаче шрифтов с сервера клиенту.
Дополнительная информация
Программы, которые поддерживают WOFF расширение файла
В следующем списке перечислены программы, совместимые с файлами WOFF, которые разделены на категории 3 в зависимости от операционной системы, в которой они доступны. WOFF файлы можно встретить на всех системных платформах, включая мобильные, но нет гарантии, что каждый из них будет должным образом поддерживать такие файлы.
Программы, обслуживающие файл WOFF
Как открыть файл WOFF?
Проблемы с доступом к WOFF могут быть вызваны разными причинами. К счастью, наиболее распространенные проблемы с файлами WOFF могут быть решены без глубоких знаний в области ИТ, а главное, за считанные минуты. Мы подготовили список, который поможет вам решить ваши проблемы с файлами WOFF.
Шаг 1. Получить Microsoft Internet Explorer
Основная и наиболее частая причина, препятствующая открытию пользователями файлов WOFF, заключается в том, что в системе пользователя не установлена программа, которая может обрабатывать файлы WOFF. Этот легкий. Выберите Microsoft Internet Explorer или одну из рекомендованных программ (например, Opera, Mozilla Firefox, Google Chrome) и загрузите ее из соответствующего источника и установите в своей системе. Выше вы найдете полный список программ, которые поддерживают WOFF файлы, классифицированные в соответствии с системными платформами, для которых они доступны. Одним из наиболее безопасных способов загрузки программного обеспечения является использование ссылок официальных дистрибьюторов. Посетите сайт Microsoft Internet Explorer и загрузите установщик.
Шаг 2. Убедитесь, что у вас установлена последняя версия Microsoft Internet Explorer
Если проблемы с открытием файлов WOFF по-прежнему возникают даже после установки Microsoft Internet Explorer, возможно, у вас устаревшая версия программного обеспечения. Проверьте веб-сайт разработчика, доступна ли более новая версия Microsoft Internet Explorer. Иногда разработчики программного обеспечения вводят новые форматы вместо уже поддерживаемых вместе с новыми версиями своих приложений. Если у вас установлена более старая версия Microsoft Internet Explorer, она может не поддерживать формат WOFF. Последняя версия Microsoft Internet Explorer должна поддерживать все форматы файлов, которые совместимы со старыми версиями программного обеспечения.
Шаг 3. Свяжите файлы Web Open Font Format с Microsoft Internet Explorer
После установки Microsoft Internet Explorer (самой последней версии) убедитесь, что он установлен в качестве приложения по умолчанию для открытия WOFF файлов. Процесс связывания форматов файлов с приложением по умолчанию может отличаться в деталях в зависимости от платформы, но основная процедура очень похожа.
Процедура изменения программы по умолчанию в Windows
Процедура изменения программы по умолчанию в Mac OS
Шаг 4. Убедитесь, что файл WOFF заполнен и не содержит ошибок
Если проблема по-прежнему возникает после выполнения шагов 1-3, проверьте, является ли файл WOFF действительным. Вероятно, файл поврежден и, следовательно, недоступен.
1. Убедитесь, что WOFF не заражен компьютерным вирусом
Если случится так, что WOFF инфицирован вирусом, это может быть причиной, которая мешает вам получить к нему доступ. Немедленно просканируйте файл с помощью антивирусного инструмента или просмотрите всю систему, чтобы убедиться, что вся система безопасна. Если файл WOFF действительно заражен, следуйте инструкциям ниже.
2. Убедитесь, что структура файла WOFF не повреждена
Если вы получили проблемный файл WOFF от третьего лица, попросите его предоставить вам еще одну копию. Возможно, что файл не был должным образом скопирован в хранилище данных и является неполным и поэтому не может быть открыт. Это может произойти, если процесс загрузки файла с расширением WOFF был прерван и данные файла повреждены. Загрузите файл снова из того же источника.
3. Убедитесь, что у вас есть соответствующие права доступа
Существует вероятность того, что данный файл может быть доступен только пользователям с достаточными системными привилегиями. Переключитесь на учетную запись с необходимыми привилегиями и попробуйте снова открыть файл Web Open Font Format.
4. Убедитесь, что ваше устройство соответствует требованиям для возможности открытия Microsoft Internet Explorer
Операционные системы могут иметь достаточно свободных ресурсов для запуска приложения, поддерживающего файлы WOFF. Закройте все работающие программы и попробуйте открыть файл WOFF.
5. Убедитесь, что у вас установлены последние версии драйверов, системных обновлений и исправлений
Современная система и драйверы не только делают ваш компьютер более безопасным, но также могут решить проблемы с файлом Web Open Font Format. Устаревшие драйверы или программное обеспечение могли привести к невозможности использования периферийного устройства, необходимого для обработки файлов WOFF.
Вы хотите помочь?
Если у Вас есть дополнительная информация о расширение файла WOFF мы будем признательны, если Вы поделитесь ею с пользователями нашего сайта. Воспользуйтесь формуляром, находящимся здесь и отправьте нам свою информацию о файле WOFF.
WOFF Web Open Font Format
Использование пользовательских шрифтов на веб-страницах
Текстовый контент всегда был важной частью веб-сайтов, но в первые дни Интернета дизайнеры и разработчики были строго ограничены в типографском контроле, который они имели над своими веб-страницами. Это включало ограничение на шрифты, которые они могли надежно использовать на своих сайтах. Вы, вероятно, слышали термин «безопасные веб-шрифты», упомянутый в прошлом. Это относится к небольшому набору шрифтов, которые, скорее всего, будут включены на компьютер человека, а это означает, что если на вашем сайте используется один из этих шрифтов, можно с уверенностью сказать, что он будет корректно отображаться в браузере человека. Сегодня у веб-профессионалов есть множество новых шрифтов и опций ввода, одним из которых является формат WOFF.
Что такое WOFF?
WOFF является аббревиатурой, которая расшифровывается как «Web Open Font Format». Он используется для сжатия шрифтов для использования со свойством CSS @ font-face. Это способ встраивания шрифтов в веб-страницы, так что вы можете использовать специализированные шрифты, помимо типичных «Arial, Times New Roman, Georgia», которые являются одними из тех вышеупомянутых безопасных веб-шрифтов.
WOFF был представлен W3C в качестве стандарта для упаковки шрифтов для веб-страниц. Это стало рабочим проектом 16 ноября 2010 года. Сегодня у нас фактически есть WOFF 2.0, который улучшает сжатие по сравнению с первой версией формата почти на 30%. В некоторых случаях эта экономия может быть еще более существенной!
Зачем использовать WOFF?
Веб-шрифты, в том числе поставляемые в формате WOFF, предоставляют много преимуществ по сравнению с другими вариантами шрифтов. Как бы ни были полезны эти безопасные веб-шрифты, и в нашей работе эти шрифты, безусловно, найдутся, есть смысл расширить наш выбор и открыть типографские опции.
Шрифты WOFF имеют следующие преимущества:
Поддержка браузера WOFF
WOFF имеет отличную поддержку браузеров в современных браузерах, в том числе:
В настоящее время он практически поддерживается всеми приложениями, за исключением всех версий Opera Mini.
Как использовать шрифты WOFF
Чтобы использовать файл WOFF, вам необходимо загрузить файл WOFF на ваш веб-сервер, дать ему имя с
, а затем вызовите шрифт в вашем CSS. Например:
) в свой стек шрифтов CSS, как и любое другое имя шрифта:
Где взять шрифты WOFF
Есть два замечательных места, где вы можете найти множество бесплатных шрифтов WOFF для коммерческого и некоммерческого использования:
Если у вас есть лицензия на использование шрифта, который недоступен в формате WOFF, вы можете использовать создатель WOFF, например, Font Squirrel, для преобразования файлов шрифтов в файлы WOFF. Существует также инструмент командной строки под названием
, который вы можете использовать в Macintosh и Windows для преобразования ваших шрифтов TrueType/OpenType в WOFF. Загрузите двоичный файл, соответствующий вашей системе, и запустите его из командной строки (или терминала) и следуйте инструкциям.
Пример WOFF
Вот несколько примеров файлов WOFF: Страница WOFF на HTML5 за 24 часа.
Оригинальная статья Дженнифер Крынин. Отредактированный Джереми Жираром 7/11/17
WOFF Web Open Font Format
Текстовый контент всегда был важной частью веб-сайтов, но в первые дни Интернета дизайнеры и разработчики были строго ограничены в типографском контроле, который они имели над своими веб-страницами. Это включало ограничение на шрифты, которые они могли надежно использовать на своих сайтах. Вероятно, вы слышали термин «безопасные веб-шрифты», упомянутый в прошлом. Это относится к небольшому набору шрифтов, которые, скорее всего, будут включены на компьютер человека, а это означает, что если на вашем сайте используется один из этих шрифтов, можно с уверенностью сказать, что он будет правильно отображаться в браузере человека. Сегодня у веб-профессионалов есть множество новых шрифтов и опций ввода, одним из которых является формат WOFF.
Что такое WOFF?
WOFF — это сокращение, которое расшифровывается как «Web Open Font Format». Он используется для сжатия шрифтов для использования со свойством CSS @ font-face. Это способ встраивания шрифтов в веб-страницы, так что вы можете использовать специализированные шрифты помимо типичных «Arial, Times New Roman, Georgia» — которые являются одними из тех вышеупомянутых безопасных веб-шрифтов.
WOFF был представлен W3C в качестве стандарта для упаковки шрифтов для веб-страниц. Это стало рабочим проектом 16 ноября 2010 года. Сегодня у нас фактически есть WOFF 2.0, который улучшает сжатие по сравнению с первой версией формата почти на 30%. В некоторых случаях эта экономия может быть еще более существенной!
Зачем использовать WOFF?
Веб-шрифты, в том числе поставляемые в формате WOFF, предоставляют множество преимуществ по сравнению с другими вариантами шрифтов. Как бы ни были полезны эти безопасные веб-шрифты, и в нашей работе, безусловно, есть место для этих шрифтов, приятно также расширить наш выбор и открыть типографские опции.
Svg иконки, какие расширения лучше исполльзовать woff-ttf-svg-eot?
Всем привет кто читает данную статью.
Давно начал использовать svg, подгружаю я все эти типы файлов woff-ttf-svg-eot, вот задаюсь вопросом, может давно некоторые типы уже не актуальны давно и можно не использовать, да и сайт чуть быстрее грузиться будет.
Простой 7 комментариев
Так что выходит, чтоб вставить иконку в html, мне надо вставлять вод этот код
(чет какой-то длинный он).
Обычный метод который я использую это
Этот код я так понял можно в css хранить.
Ну и стиль для иконки данной
Так если не ошибаюсь, то все форматы прописывать это хорошо, не все сразу они грузятся.
Ход подгрузки вроде такой.
На developers.google приводится пример как браузер определяет, что для отображении сайта нужен какой-либо шрифт, он читает предоставленных список ресурсов в указанном порядке и старается скачать нужный шрифт.
1)Браузер читает разметку страницы и определяет, какие варианты шрифтов нужны для отрисовки текста.
2)Браузер проверяет, не установлены ли нужные шрифты на устройстве.
3)Если файла нет на устройстве, браузер читает список внешних расположений:
4)Если формат указан, перед скачивание браузер проверяется, поддерживается ли он. В случае отрицательного ответа программа переходит к следующему варианту.
5)Если указание на формат отсутствует, браузер скачивает ресурс.
Но это шрифт, а у меня вопрос по иконки ) svg