Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Веб-шрифты при помощи правила @font-face

.

Веб-шрифты при помощи правила @font-face

С самых первых дней существования Всемирной паутины дизайнерам хотелось создавать сайты с отличной типографикой. Но, как все мы знаем, браузеры очень ограниченно поддерживают шрифты. По сути, выбор всегда ограничен типовым набором Arial, Verdana, Times, Georgia и несколькими другими.

За эти годы мы придумали массу обходных решений этой проблемы. Мы создавали растровые изображения в форматах JPEG и PNG для заголовков сайтов, логотипов, кнопок и элементов навигации. Когда этим элементам требовались дополнительные варианты, мы снова создавали изображения или спрайты, чтобы гарантировать, что страница быстро загружается и реагирует на действия пользователя.

Проблемы начинались тогда, когда нужно было изменить текст или дизайн.

Растровые изображения — приемлемое решение для нескольких элементов на странице, но просто невозможно полагать, что дизайнер будет вручную отрисовывать в Photoshope каждый заголовок на странице, а потом загружать его на сайт. Вот и получалось, что для ключевого элемента на странице, который требовалось часто изменять, мы были ограничены все тем же набором стандартных шрифтов.

Чтобы заполнить эту нишу, было создано несколько отличных скриптов, таких как основанный на Flash-технологии sIFR, или Cufon, использующий элемент canvas. Это было частичное решение проблемы: с одной стороны, они позволили встраивать дизайнерские шрифты, но с другой, все они имели весьма серьезные недостатки. Иногда их было трудно внедрять; у пользователя должен был быть включен JavaScript и плагин Flash (в случае sIFR). Вдобавок они сильно снижают скорость загрузки и визуализации страницы.

К счастью, теперь у нас есть лучший вариант: @font-face — чистое решение CSS для внедряемых шрифтов, которое поддерживается практически всеми браузерами, начиная с IE6.

Мы включаем два шрифта для нашего сайта HTML5 Herald: League Gothic, разработанный League of Movable Type1, и Acknowledgement Medium, разработанный Беном Вейнером из компании Reading Type2. Эти шрифты показаны на рис. 9.1 и 9.2 соответственно.

Веб-шрифты при помощи правила @font-face

Рис. 9.1. Шрифт League Gothic

Веб-шрифты при помощи правила @font-face

Рис. 9.2. Шрифт Acknowledgement Medium

Давайте посмотрим, как встроить эти шрифты и использовать их для любых текстов на нашем сайте, словно они установлены на машине пользователя.


.

Читайте так же:
Not found