Недавно мы публиковали статью — Cufon-нестандартный шрифт на сайте, в которой я рассказывала о способах использования нестандартных шрифтов на сайте, сегодня рассмотрим второй метод – параметр css @font-face .
Основным преимуществом @font-face над cufon является то, что текст, переведенный в нестандартный шрифт можно выделять и не нужно ждать загрузки скрипта для того, чтобы текст перевелся в соответствующий шрифт.
Путь к шрифту прописываем в свойстве src.
корректный код для использования @ font-face будет следующим:
@font-face {font-family: MyriadProCond; src: url('MyriadPro-Cond.otf');
src: url('myriadpro-cond-web.html'); src: url('myriadpro-cond-webd41d.eot?') format('â?º'),
url('myriadpro-cond-web.woff') format('woff'), url('myriadpro-cond-web.ttf') format('truetype'),
url('myriadpro-cond-web.svg#MyriadProCondensed') format('svg');}
В конкретном примере мы подключили шрифт MyriadProCond. Параметр @font-face задается однократно. В дальнейшем, для того чтобы присвоить объекту шрифт MyriadProCond, просто нужно вызвать его параметром font-family
font-family: MyriadProCond;
Если рассмотреть код подробнее, видим, что для подключения шрифта, нужно задать путь к нескольким его версий вразных форматах. Использование форматов .otf, .eot, .woff, .ttf и .svg обеспечит нам максимальную кроссбраузернисть.
Чтобы получить шрифт во всех этих форматах, нужно его конвертировать. Для этого как нельзя лучше подходит сервис Font Squirrel — www.fontsquirrel.com
Нам нужно зайти на вкладку @font-face Generator и нажать на кнопку AddFonts, выбрать необходимый шрифт, затем, желательно, выбрать параметр Expert и выбрать необходимые для Вас параметры.
Если нужна поддержка кириллицы, для параметра Subsetting: выбираем опцию Custom Subsetting… и там ставим галочку возле Cyrillic.
Соглашаемся с правилами использования — ставим галочку возле Agreement: и жмем на кнопку Download Your Kit.
На выходе получим архив с шрифтами и. Html файлами, где наглядно показано их использование.
Подключаем все в css и готово! Пользуемся с удовольствием 🙂
Пример использования параметра @font-face
Font Face Test
4 Response Comments
текст вылазит на левый блок, поправьте. И еще так и не понятно вы пишите «путь к шрифту прописываем в свойстве src.» а потом код, но я не понял как именно это сделать, напишите полностью готовый код вставки в штмл
Алекс, спасибо, поправили. Пример использования параметра я добавила в конце статьи
Оперативненько вы, теперь я все понял, спс
шрифтовая белка по ходу тоже не со всеми шрифтами фурычит…