Нестандартный шрифт на сайт. Средствами CSS
Очень часто в дизайн сайта гораздо лучше вписываются нестандартные шрифты, чем стандартные, но вылезать из-за рамок стандартов не хочется. Для вылаза из рамок существуют, конечно, специальные скрипты, но этот вариант всяко уступает тому, которое уже заранее создано в спецификации CSS — свойство @font-face.
В предлагаемой таблице указано какие шрифты какими версиями браузеров поддерживаются. Материалы взяты из интернета и дополнены собственными наблюдениями в виде указанных значков +. Для тестирования я использовал Chrome 8.0, Opera 11.01, Firefox 4.0b7, Safari 5.0.
Вот только для IE не все так просто. Хотя он и первый начал поддерживать внедрение сторонних шрифтов (еще с 1997 года с выходом Internet Explorera 4-й версии!!!), он требует особого формата для шрифта — EOT (Embedded OpenType). Формат EOT решает сразу две задачи:
— сжимает файл шрифта, делая его вес в разы меньше (судя по тестам коллег этот метод лучше сжимает чем и RAR, и ZIP, и gzip методы)
— шифрует файл: в файл шрифта записывается информация, где он должен быть использован. Вне этого адреса этот шрифт работать не будет.
В хроме работают все шрифты, но раньше всех заработал SVG. А вот для огнелиса про SVG можно забыть, т.к. в четвёртой версии он не поддерживается. Впрочем, для Сафари и Оперы почти такая же история – в последних версиях поддержка SVG также убрана, а рабочим остался только TTF.
EOT | TTF и OTF | SVG | WOFF | |
---|---|---|---|---|
Internet Explorer | IE5+ | IE9 | – | IE9 |
Google Chrome | – | Chrome 4.0+ | Chrome 0.3+ | Chrome 5.0+ |
Mozilla Firefox | – | Firefox 3.5+ | Firefox 3.5 | Firefox 3.6+ |
Apple Safari | – | Safari 3.1+ | Safari 3.1 | – |
Opera | – | Opera 10+ | Opera 9 | – |
Наглядный пример — шрифт внедренный для нашего Интернет-магазина
CSS код для внедрения нестандартного шрифта:
@font-face {
font-family: gothic_respectum;
src: local ('☺'),
src: url («.../image/font/gothic_respectum.eot»);
url («.../image/font/gothic_respectum.woff») format («woff»),
url («.../image/font/gothic_respectum.ttf») format («truetype»),
url («.../image/font/gothic_respectum.svg») format («svg»);
font-weight: normal;
font-style: normal;
}
Вставляем код в css к нужному тегу что бы применялось это правило и наш — нестандартный шрифт:
h2 {
font-size: 17px;
font-family:gothic_respectum_italic, arial;
}
И вот получаем результат красивый шрифт на сайте:
Достоинства использования @font-face
Основные достоинства очевидны: сео, возможный поиск по тексту, работа с ним, не говоря уже о том, что можно работать с текстом как хочешь – line-height, letter-spacing, first-letter – всё это возможно.
Второй, плюс для некоторых сайтов на иностранных языках, для которых большая проблема с общедоступными шрифтами. К примеру, в арабском языке при письме некоторые символы меняются в зависимости от того, какие символы являются соседними. Разные операционки используют различные алгоритмы отрисовки в таких случаях, а загружая при помощи font-face нужные шрифты, можно избежать проблемы неправильного отображения на различных машинах.
Недостатки использования @font-face
Не любой имеющийся у себя в коллекции шрифт можно у себя использовать. Почему? Лицензионное соглашение. Даже бесплатные не все шрифты можно использовать, так как некоторые из них выкладываются бесплатно в качестве рекламных продуктов, и их нельзя распространять и применять в общественных проектах, а именно сайтах. Так что перед тем как использовать те или иные шрифты, необходимо проверять их лицензии.
Отправить ответ