Page 130 - Сила CSS3 Освой новейший стандарт

130 • Глава 3. Линованная бумага

ление -webkit-box-shadow. (Иногда бывает очень удобно объявлять одно и то же
свойство в разных строках для разных браузеров!)
Теперь в браузерах на базе Webkit тень под блокнотным листом вовсе отображаться
не будет. Для того чтобы добавить ее, не прибегая к помощи -webkit-box-shadow,
можно, например, создать изображение тени и наложить его на правый и нижний
отрезки рамки, снова воспользовавшись свойством -webkit-border-image.

встраивание уникальных шрифтОв
Мы хорошо поработали над оформлением фонового изображения статьи, и теперь
я предлагаю перейти к стилизации ее содержимого. С помощью правил @font-face
мы можем исправить заголовки так, чтобы они выглядели написанными от руки —
более того, этот фокус будет работать даже в IE.

что такое @font-faCE?
Правило @font-face позволяет добавлять в код страницы ссылки на шрифты, хра-
нящиеся на сервере (так же как вы делаете с изображениями). Браузер загружает
шрифты в кэш и использует их для оформления текста на странице. Очень часто
такой подход называют встраиванием шрифтов (хотя в действительности они
никуда не встраиваются), а встроенные шрифты — веб-шрифтами.
В действительности правило @font-face появилось еще в 1998 году и было тогда
частью спецификации CSS 2. Из версии CSS 2.1 его удалили, а теперь, в CSS3, оно
снова возвратилось с еще более обширной и надежной поддержкой в браузерах.
До сих пор в отсутствие веб-шрифтов веб-дизайнерам приходилось ограничивать-
ся небольшим набором наиболее распространенных шрифтов, установленных на
пользовательских компьютерах, — «безопасных для веб» шрифтов. Желая оформить
страницу другими шрифтами, отличными от Arial, Verdana и Georgia (и нескольких
других), дизайнер создавал заголовки в изображениях, роликах Flash или добавлял
сценарии, создающие текст с использованием уникальных шрифтов. Все эти тех-
ники замены шрифтов страдали одинаковыми недостатками: плохая доступность
содержимого и проблемы разного уровня с удобством использования страницы.
Кроме того, их труднее реализовывать и поддерживать, и они могут замедлить за-
грузку и отображение страницы.
С другой стороны, @font-face позволяет оставить на странице реальный текст. Вы
больше не зависите от наличия встраиваемого модуля Flash на компьютере поль-
зователя или правильной работы JavaScript. Вам не приходится создавать никакие
изображения и сценарии, а вашим пользователям — загружать их. Вся работа за-
ключается в добавлении приблизительно такого кода CSS в вашу таблицу стилей:
@font-face {
font-family: Raleway;

www.trk.kg