Как использовать нестандартный шрифт на сайте
При вёрстке страниц время от времени приходится сталкиваться с нестандартными шрифтами. Безусловно, использовать их как основные на сайте не стоит, но вот в различных отдельных элементах, например, в шапке, вполне можно. Проблема с этими шрифтами в том, что его может просто не оказаться на компьютере пользователя, что приведёт к тому, что у него соответствующий текст отобразится стандартным шрифтом, в результате, задуманный дизайн будет испорчен. Данную проблему решают очень просто: весь нестандартный шрифт вырезают просто в виде картинки. Однако, есть и другой способ использовать нестандартный шрифт на сайте.
Давайте я напишу CSS-код, а потом его поясню:
@font-face {
font-family: SpecialFont;
src: url("font/specialfont.ttf");
}
p {
font-family: SpecialFont;
}
В результате, к тегам <p> будет применён шрифт SpecialFont. Я думаю, код достаточно прозрачный, но всё-таки поясню. Вам нужно раздобыть шрифт и загрузить к себе на сайте, например, в папку font. Дальше в CSS-коде прописать в @font-face его имя и путь к нему, а дальше уже можно его использовать.
Но недаром в большинстве случаев используют картинки для вывода нестандартных шрифтов. У использования @font-face есть 2 недостатка:
- Есть очень крупные шрифты, которые весят сотни килобайт, а это резко увеличит время загрузки страницы.
- Второй минус ещё серьёзнее. Не все браузеры поддерживают такую возможность, более того, некоторым браузерам нужен шрифт в другом формате (не ttf). Таким образом, у некоторых Ваш шрифт всё равно не отобразится. Чтобы решить данную проблему, надо загружать один и тот же шрифт в разных форматах, что в разы усилит первый минус.
Но стоит отметить, что первый минус уже не так принципиален как раньше. Так как скорости Интернет-соединения растут очень быстро, и уже мало, кого волнуют дополнительные 100-200 КБ.
Второй минус тоже не так принципиален. Единственные более-менее популярные браузеры, которые не поймут этого кода - это IE8 и ниже, плюс iOS. Все остальные современные браузеры без проблем данный код поймут.
Учитывая, что IE8 ещё относительно популярен, то лично я пока буду выводить нестандартные шрифты по-прежнему в виде картинки, но очень надеюсь, что в ближайшем будущем данный браузер станет историей, и тогда можно будет использовать @font-face и ttf-шрифты.
P.S. Всех женщин поздравляю с праздников весны!
-
Создано 08.03.2013 10:41:32
-
Михаил Русаков
Комментарии (6):
Спасибо за поздравление и за полезную статью!
Ответить
Спасибо.Обязательно применю.
Ответить
Если нужно задать несколько font-family, то код будет выглядеть таким образом??? @font-face { font-family: SpecialFont; src: url("font/specialfont.ttf"); font-family: SpecialFont1111; src: url("font/specialfont1111.ttf"); } Спасибо.
Ответить
Нет, нужно каждый шрифт в отдельном @font-face указывать.
Ответить
Здравствуйте Михаил!Не могу подключить шрифт Trebuchet MS к сайту. В chrome отображается корректно, а в остальных браузерах отображается совсем другой. Пишу так: @font-face { font-family:"Trebuchet MS"; src: url(fonts/trebuc.eot); src: local("Trebuchet MS"), url(http://singlecombats.ru/fonts/trebuc.ttf);}
Ответить
Посмотрите в firebug в ресурсах, подгружается ли вообще нужный шрифт.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.