Текстовый контент всегда был важной частью веб-сайтов, но в первые дни Интернета дизайнеры и разработчики были строго ограничены в типографском контроле, который они имели над своими веб-страницами. Это включало ограничение на шрифты, которые они могли надежно использовать на своих сайтах. Вероятно, вы слышали термин «безопасные веб-шрифты», упомянутый в прошлом. Это относится к небольшому набору шрифтов, которые, скорее всего, будут включены на компьютер человека, а это означает, что если на вашем сайте используется один из этих шрифтов, можно с уверенностью сказать, что он будет правильно отображаться в браузере человека. Сегодня у веб-профессионалов есть множество новых шрифтов и опций ввода, одним из которых является формат 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. Например:
- Загрузить шрифт называется
myWoffFont.woff
к
/ шрифты
каталог веб-сервера.
- В вашем CSS файле добавьте
@ Шрифт-лицо
раздел:
-
@ font-face {
-
-
семейство шрифтов: myWoffFont;
-
формат src: url ('/ fonts / myWoffFont.woff') ('woff'); -
}
- Добавить новое имя шрифта (
myWoffFont
) в ваш стек шрифтов CSS, как и любое другое имя шрифта:
-
п {
-
-
семейство шрифтов: myWoffFont , Женева, Arial, Helvetica, без засечек;
-
}
Где взять шрифты WOFF
В двух замечательных местах вы можете найти множество бесплатных шрифтов WOFF для коммерческого и некоммерческого использования:
Если у вас есть лицензия на использование шрифта, который недоступен в формате WOFF, вы можете использовать создатель WOFF, например, Font Squirrel, для преобразования файлов шрифтов в файлы WOFF. Существует также инструмент командной строки под названием
sfnt2woff
которые вы можете использовать в Macintosh и Windows для конвертации шрифтов TrueType / OpenType в WOFF. Загрузите двоичный файл, соответствующий вашей системе, и запустите его из командной строки (или терминала) и следуйте инструкциям.
Пример WOFF
Вот несколько примеров WOFF файлов: Уофф страница на HTML5 в течение 24 часов .
Оригинальная статья Дженнифер Крынин. Отредактированный Джереми Жираром 7/11/17