Кросс-браузерный @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;
}На этом все. Не злоупотребляйте различными шрифтами ;-)
Понравилась статья?
Тогда подпишись на обновления через RSS или воспользуйся
другими способами подписки.
Комментарии — 37
RSSЯ даже больше скажу, буржуйские спецы говорят, что 2 разных шрифта на странице — более чем достаточно.
Это принципиально другой подход сифон и другие JS / флеш вставщики это костыли, а это решение предлагаемое браузерами и W3C. На текущий момент, как было сказано правильно, его поддерживают ВСЕ современные браузеры, и даже многие устаревшие, IE поддерживает EOT'ы начиная с 4-ой версии.
Из плюсов нет проблемы с выделением / копированием, и нет дополнительной нагрузки на клиенте, кроме загрузки нужного для браузера шрифтового файла, но это один раз, дальше из кеша.
@ZEEN
По поводу глюков с русским все просто, по умолчанию "белка" откидывает все кроме латинских букв, надо переходить в экспертные настройки и либо выбирать "Custom Subsetting..." и нужные шрифтовые группы, либо оставлять без "обрезания" и выбирать "No Subsetting", эти настройки делаются в группе: "Subsetting". Сам сначала не могу понять в чем проблема.
По поводу примера с "TheanoDidotRegular" выложили бы куда-нить, что бы не искать / качать самим)
У меня на сайте например шрифт моднявый именно так прилеплен
Присоединяюсь к Allods Online в опере работает с 10-ки это уже более чем, при том что любая открытая более младшая версия просится очень настойчиво обновится и сайт оперы намекает )
На в крайнем случае если так требуется поддержка в более уставших браузерах, то для них через хаки / jQuery определение браузера и версии подключать сифон ;)
Больше всего меня приятно удивил IE который конечно использует только свой проприетарный формат, но хотя бы может и умеет и уже давно )
Чтобы сконвертировать ttf в otf, нужно воспользоваться сервисом http://onlinefontconverter.com/
Нажать skip login, а там уж разберетесь.
Люди кто знает, как на мозилле можно свой шрифт поставить?
Только есть одна единственная проблема в виндоусе(в линуксе не смотрел, так как не держу такого добра)(в маке как всегда все великолепно): если не настроен ClearType шрифт отображается без сглаживания. А это серьезный недочет. Но все равно смотрю в сторону @font-face. ООоочень удобно, и главное - нативно!
В случае, если надпись очень видная и ответственная, можно использовать Кюфон, если нет, и отсутствие сглаживаения(не во всех случаях) не критично, можно смело лепить @font-face.
Версия оперы: 10.61
А конвектор на этом сайтике есть http://www.fontsquirrel.com/fontface/generator только в настройках поставьте галочку на Cyrillic
Остальные браузеры отображают замечательно