Что такое открытый формат шрифтов WOFF?

Текстовый контент всегда был важной частью веб-сайтов, но в первые дни Интернета дизайнеры и разработчики были строго ограничены в типографском контроле, который они имели над своими веб-страницами. Это включало ограничение на шрифты, которые они могли надежно использовать на своих сайтах. Вы, вероятно, слышали термин «безопасные веб-шрифты», упомянутый в прошлом. Это относится к небольшому набору шрифтов, которые, скорее всего, будут включены на компьютер человека, а это означает, что если на вашем сайте используется один из этих шрифтов, можно с уверенностью сказать, что он будет корректно отображаться в браузере человека. Сегодня у веб-профессионалов есть множество новых шрифтов и опций ввода, одним из которых является формат 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 разрабатывает простой HTML-текст с помощью CSS, предоставляя вам доступность и контроль дизайна, которые изображения не допускают.
• Файлы WOFF содержат типографскую информацию, такую ​​как контекстные формы и рисунки старого стиля. Это дает вашим веб-страницам лучшую типографику, потому что вы используете правильные символы, а не только приблизительные значения.
• Шрифты WOFF могут помочь с интернационализацией, потому что вы можете вставлять шрифты с символами из других языков.
• Как и весь текст в стиле CSS, шрифты в стиле WOFF более удобны для поисковых систем. Поисковые системы не «видят» текст, встроенный в изображение, и хотя текст ALT может помочь, ничто не заменит сам текст.
• Шрифты WOFF сжаты, поэтому они меньше, чем другие типы файлов шрифтов. Это поможет скорости загрузки сайта и общей производительности.
• Вы можете использовать файлы WOFF для сохранения идентичности вашего бренда, встраивая ваши корпоративные шрифты в файлы WOFF.

Поддержка браузера WOFF

WOFF имеет отличную поддержку браузеров в современных браузерах, в том числе:

• Chrome 6+
• Firefox 3.6+
• Internet Explorer 9+
• Opera 11.1+
• Safari 5.1+

В настоящее время он практически поддерживается всеми приложениями, за исключением всех версий Opera Mini.

Как использовать шрифты WOFF

Чтобы использовать файл WOFF, вам необходимо загрузить файл WOFF на ваш веб-сервер, дать ему имя с

@ Шрифт-лицо

свойство, а затем вызвать шрифт в вашем CSS. Например:

1. Загрузить шрифт называется

   myWoffFont.woff

   к

   / шрифты

   каталог веб-сервера.

2. В вашем CSS файле добавьте

   @ Шрифт-лицо

   раздел:

   1. @ font-face {

3. семейство шрифтов: myWoffFont;

4. формат src: url ('/ fonts / myWoffFont.woff') ('woff');

5. }

6. Добавьте новое имя шрифта (

   myWoffFont

   ) в ваш стек шрифтов CSS, как и любое другое имя шрифта:

   1. п {

7. семейство шрифтов: myWoffFont, Женева, Arial, Helvetica, без засечек;

8. }

Где взять шрифты WOFF

Есть два замечательных места, где вы можете найти множество бесплатных шрифтов WOFF для коммерческого и некоммерческого использования:

• Открытая библиотека шрифтов
• Шрифт Белка

Если у вас есть лицензия на использование шрифта, который недоступен в формате WOFF, вы можете использовать создатель WOFF, например, Font Squirrel, для преобразования файлов шрифтов в файлы WOFF. Существует также инструмент командной строки под названием

sfnt2woff

которые вы можете использовать в Macintosh и Windows для преобразования ваших шрифтов TrueType / OpenType в WOFF. Загрузите двоичный файл, соответствующий вашей системе, и запустите его из командной строки (или терминала) и следуйте инструкциям.

Пример WOFF

Вот несколько примеров файлов WOFF: Страница WOFF на HTML5 за 24 часа.

Оригинальная статья Дженнифер Крынин. Отредактированный Джереми Жираром 7/11/17