При вёрстке страниц время от времени приходится сталкиваться с нестандартными шрифтами. Безусловно, использовать их как основные на сайте не стоит, но вот в различных отдельных элементах, например, в шапке, вполне можно. Проблема с этими шрифтами в том, что его может просто не оказаться на компьютере пользователя, ч...
При вёрстке страниц время от времени приходится сталкиваться с нестандартными шрифтами. Безусловно, использовать их как основные на сайте не стоит, но вот в различных отдельных элементах, например, в шапке, вполне можно. Проблема с этими шрифтами в том, что его может просто не оказаться на компьютере пользователя, что приведёт к тому, что у него соответствующий текст отобразится стандартным шрифтом, в результате, задуманный дизайн будет испорчен. Данную проблему решают очень просто: весь нестандартный шрифт вырезают просто в виде картинки. Однако, есть и другой способ использовать нестандартный шрифт на сайте.
Давайте я напишу 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. Всех женщин поздравляю с праздников весны!
