Реальный пиарСоздание сайтовВёрстка → Кросс-браузерный @font-face

Кросс-браузерный @font-face

форматы файлов

Всем привет!

Сейчас все больше разработчиков начинают внедрять собственные шрифты в дизайн сайтов. Весной я написал статью о том, как с помощью различных библиотек (JS, Flash) можно использовать сторонние шрифты на сайтах.

Сегодня же я хочу рассказать о свойстве CSS @font-face, с помощью которого легче и удобнее всего использовать произвольный шрифт на сайте. Но есть одно «но», которое предстоит решить — разные браузеры требуют разные форматы шрифтовых файлов.
Введение

По данным статистики на данный момент минимум 92% десктопных браузеров правильно работают с @font-face. Делается все просто: называем шрифт, указывает путь до него, используем его прямо в CSS:
// Объявляем шрифт
@font-face {
font-family: 'Имя шрифта';
src: url('путь/до/него');
}

// Применяем шрифт
p {
font-family: 'Имя шрифта', Arial;
}

Здесь в src: url указывается путь до файла со шрифтом, в src: local — название шрифта на локальной машине на тот случай, если у юзера этот шрифт уже есть. Но, не все так просто, разным браузерам нужны разные форматы шрифтов.
Форматы шрифтов

Шрифты могут быть в форматах TTF, OTF, EOT, SVG и WOFF:
Internet Explorer (все версии) — EOT;
Firefox (начиная с 3.5) — TTF/OTF (WOFF добавлен с версии 3.6);
Opera (начиная с 10) — TTF/OTF;
Chrome (все версии) — SVG (TTF/OTF добавлены в конце января 2010-го);
Safari (начиная с 3.2) — TTF/OTF.

Как видим, у нас есть минимум четыре типа файлов, которые нужно подгружать.
Правильное использование

Для того, чтобы каждый раз не тратить кучу времени на создание нескольких шрифтовых файлов и разного синтаксиса подключения, хорошие люди сделали сервис — Шрифтовая белка. Заходим, загружаем шрифт, получаем архив с примером использования и необходимыми типами файлов.

Теперь можно проверить, что все везде работает как надо. Предлагаю ради интереса посмотреть на то, как же выглядит кросс-браузерный @font-face:
@font-face {
font-family: 'TheanoDidotRegular';
src: url('theanodidot-regular-webfont.eot');
src: local('☺'),
url('theanodidot-regular-webfont.woff') format('woff'),
url('theanodidot-regular-webfont.ttf') format('truetype'),
url('theanodidot-regular-webfont.svg#webfontE40g3tc3') format('svg');
font-weight: normal;
font-style: normal;
}

На этом все. Не злоупотребляйте различными шрифтами ;-)


Источник: http://vremenno.net

Рекомендуем



Красивые градиентные кнопки без картинок для всех браузеров Верхний бордер можно было сделать и с помощью inset box-shadow, но тогда кнопки не подходили бы под понятие graceful degradation


Оптимизация CSS для ускорения обработки браузерами Сегодня хочу поговорить о том, как браузеры обрабатывают правила CSS и как писать эти самые правила так, чтобы страница рендерилась быстрее


Произвольные элементы DOM как фон сайта Такой способ найдет применение на сайтах, где разработчики и дизайнеры хотят сделать сложный, большой фон, возможно, с JS или Flash-анимации, и при этом хотят, чтобы он корректно работал на всех разрешениях