Woff2 что за формат
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
Улучшение загрузки шрифтов c помощью localStorage и WOFF2
В своей прошлой статье (перевод) я показал метод, как можно загружать веб-шрифты не блокируя отрисовку страницы и убрать при этом раздражающее пользователей мерцание текста. На этот раз я продемонстрирую оптимизированную версию скрипта и покажу способ подключения WOFF2 для новейших браузеров.
Задачи
Как это сделать
Обзор скрипта
Давайте взглянем на скрипт
Скрипт и несколько Grunt-задач по минификации доступны по ссылке bdadam / OptimizedWebfontLoading. Также вы найдёте там демонстрации.
Где разместить скрипт
Скрипт должен находиться в разделе вашей страницы над всеми объявлениями стилей, так, чтобы это не блокировало отрисовку страницы (браузер не должен ждать, пока CSSOM станет готова).
Что происходит, когда localStorage недоступен?
Как правило, это случается, когда cookies отключены или сайт загружен внутри WebView-контейнера в приложении. В этом случае код по-прежнему работает и откатывается к обычному браузерному кэшированию. CSS файл запрашивается при каждой загрузке страницы, но обрабатывается из браузерного кэша — до тех пор, пока у CSS файла установлены соответствующие заголовки для кэширования.
Запасной шрифт
Я считаю, что достаточно подключать веб-шрифты лишь для тех браузеров, которые поддерживают WOFF или WOFF2 форматы. Это примерно 90% всех пользователей в мире. Другие браузеры должны получать текст, отрисованный запасным шрифтом.
Пользователи со старыми браузерами будут благодарны за то, что мы не тратим их ограниченные ресурсы (ЦПУ, память) на развлекательные нужды.
Демонстрация
Хотя техника, показанная в этой статье, на сей момент является самым предпочтительным для меня путём загрузки веб-шрифтов, для сравнения я представлю ещё две техники.
Сравнение
Я провёл некоторые тесты на webpagetest.org с 3G соединением.
Первое посещение было просто-напросто одинаковым для решений с localStorage и асинхронным CSS. Оба сначала отрисовали текст запасным шрифтом, затем переключились на веб-шрифт, вызвав мерцание в первый раз. Загрузка шрифтов из внешних файлов привела к невидимости текста до тех пор, пока шрифты не были загружены. Это затормозило отрисовку на 0.6 секунды.
Сравнения от второго посещения также показывают некоторые различия между localStorage и асинхронным CSS. Мы можем ясно видеть, что загрузка из localStorage не вызывает никакой перерисовки. Как только HTML загружен, страница отрисовывается немедленно.
Метод асинхронного CSS отрисовывает страницу с базовым шрифтом, а затем перерисовывает с веб-шрифтом. Это вызывает мерцание для пользователя при каждой загрузке страницы.
C учётом этого, № 1 — победитель.
Скриншоты, чтобы показать эти отличия:
Асинхронная загрузка CSS с использованием localStorage. Нет перерисовки. 
Асинхронная загрузка CSS без использования localStorage. Видна перерисовка. 
Внешняя загрузка шрифтов. Отрисовка останавливается, пока шрифты не загрузятся.
Материалы
Обновление
Веб-шрифты на распутье
Перевод не претендует на 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].
Веб любит оптимизированное. Давай оптимизируем загрузрузку и рендеринг шрифтов настолько насколько это возможно.
_В современном вебе до сих пор не решена проблема рендера шрифта, поэтому разработчику надо думать как же это сделать самым лучшим образом для пользователя._
На данный момент существуте четыре формата шрифтов
### Поддержка в браузерах
Из этой статистики сразу можно сделать несколько выводов *
1) От eot стоит отказаться, так как поддержка только в Internet Explorer
2) От ttf тоже можно отказаться так как есть пересечение с woff контейнером
Я рассматривал вес шрифта на примере OpenSans Regular, но соотношение подойдёт для любого шрифта.
woff и woff2 являются оптимизированными контейнерами для веба и поэтому весят меньше.
## Подключение шрифта на страницу @font-face
Подключать шрифты надо правильно. Да! шрифт можно подключить не правильно.
src: url(‘/path/fonts/OpenSans.woff2’) format(«woff2»),
Здесь стоит обратить внимание на порядок подключения форматов.
Браузеры которые понимают woff2 начнут загружать woff2 версию шрифта и остальные не тронут.
Браузеры которые не понимают woff2 продолжат далее по списку woff, ttf, eot.
Если возможно отказывайся от eot и ttf форматов.
Это достаточно устаревшие форматы и наврядли придуманные для веба. Весят гораздо больше, чем современные контнейры. Поддержка у eot крайне маленькая.
Используем только woff и woff2.
woff2 и woff весят гораздо меньше eot и ttf, что ускоряет загрузку шрифта на сайте и начало его отрисовки.
У woff2 доля в браузерах достаточно маленькая, что легко компенсируется woff форматом.
P.S. это серия постов про оптимизацию. Про шрифты ещё будет дополненение, но не хотелось бы уйти за лимит поэтому решил разбить на несколько частей.
Пикабу обучающий. Подписалась! А вопросы можно задавать? По шрифтам и проблемам с ним?
Как раз актуальная тема. Спасибо. Подписался.
Обычно проблемы пользователей не в 10кб шрифтов.
нехорошо писать markdown там, где его нет 🙂
Перезарядка рандомных предметов
В детстве так же делал))
Пролетарии всех стран объединяйтесь
Юрий Ковальчук захватил берег Ладоги. Подтверждено Росприроднадзором
В ответ на жалобы, поданные в Росприроднадзор и прокуратуру, пришли первые ответы. Росприроднадзор подтвердил наличие нарушения Водного кодекса на участке с кадастровым номером 10:07:0062205:161, расположенном близ «Дачи Винтера» под Сортавалой, а именно отсутствия свободного доступа к берегу Ладоги из-за незаконного забора. Нарушитель — фирма «Прайм» (ИНН 7801206670), связанная с Юрием Ковальчуком, близким другом Владимира Путина и, по невероятному совпадению, сверхбогатым и очень влиятельным дяденькой.
Несмотря на выявленное нарушение, административку в отношении «Прайма» Росприроднадзор пока не возбудил, а лишь пригласил фирму пообщаться по ситуации берегозахвата.
Отмечу, что и такого ответа Росприроднадзора могло не быть, если бы не подключившиеся к истории активисты движения «Против захвата озер», смелые депутаты Законодательного Собрания Карелии и конечно же активные Пикабушники 😉
Наша цель не изменилась — незаконный забор должен быть снесен, а свободный доступ к берегу Ладоги должен быть обеспечен для всех!
Ну а чтобы «общение» Росприроднадзора и «Прайма» шло продуктивно, а его результаты были позитивными для всех ценителей Ладоги, давайте поднажмем и по максимуму распространим и предадим огласке эту ситуацию!
Сила Пикабу! Не сбавляем обороты 😉
[BadComedian] про интервью с Екатериной Мизулиной
Интервью шикарное от А до Я. Его стоит посмотреть ради понимания того, ЧТО ТВОРИТСЯ В ГОЛОВАХ у молодой чиновничьей поросли (Екатерине всего 37 лет).
Какой-то булщит классический.
Не, лучше постик во Вконтакте нашмалять (это может любой пустобрёх вроде меня), зачем делом-то заниматься? Ну видимо опять государство мешает… Или Моргенштерн, или компьютерные игры… Или булщит классический.
P.S. Я не слушаю Моргенштерна, но я смотрю отечественное кино. И раз вы поднимаете вопросы “деструктива”, то стоит сказать, что к фильмам их должно быть куда больше, ведь они на наши налоги снимаются, а Моргенштерн без гос. финансирования творит
В 2007 году Джим Парсонс, тогда еще почти никому не известный актер, сделал это фото после того,
как впервые увидел свое лицо на рекламном плакате.
Своя атмосфера на заводе
График работы посменный и кому-то надоел вечный беспорядок на столике у станка. 🙂
Инфляция
Хожу стричься раз в полтора месяца. В среднем плачу тысячу рублей. Но, если мне парикмахер скажет пять тысяч рублей… Скорее всего откажусь, и попрошу жену стричь меня под машинку. Где эта точка кипения?! Или точка невозврата?! Мы же все понимаем, что зарплаты у большинства останутся на том же уровне?!