Текстовая тень — отличный трюк, который, кстати, было непросто реализовать методами предыдущего поколения. Однако он всего лишь добавляет эффект объема, а не меняет сам текст. Создание тени — как покраска старого автомобиля: в результате у вас остается все та же старая машина. А у нас — все тот же шрифт.
Проблема со шрифтами стара, как сама Сеть. На компьютерах обычных пользователей Сети чаще всего установлен небольшой набор шрифтов. У разных пользователей на компьютерах можно найти разные шрифтовые гарнитуры, а некоторые умудряются установить шрифты, которых нет у большинства других пользователей. Годами на веб-сайтах приходилось ограничиваться минимальным набором надежных шрифтов — базовой группой, которая наверняка встретится на любом компьютере. Вся информация выводилась на экран исключительно с использованием таких шрифтов.
Свойство @font-face позволяет дизайнерам подключать определенный шрифт и применять его для отображения текста на веб-странице. Теперь любой желаемый шрифт можно встроить в веб-сайт, просто добавив файл этого шрифта.
Листинг 3.10. Новый шрифт для заголовка
Body {
Text-align: center;
}
#mainbox {
Display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD;
-moz-border-radius: 20px;
-webkit-border-radius: 20px; border-radius: 20px;
-moz-box-shadow: rgb(150,150,150) 5px 5px 10px; — webkit-box-shadow: rgb(150,150,150) 5px 5px 10px; box-shadow: rgb(150,150,150) 5px 5px 10px;
}
#title {
Font: bold 36px MyNewFont, verdana, sans-serif;
Text-shadow: rgb(0,0,150) 3px 3px 5px;
}
@font-face {
Font-family: ‘MyNewFont’; src: url(‘font. ttf’);
}
Загрузите файл font. ttf с нашего веб-сайта или выберите один из имеющихся на вашем компьютере. Скопируйте его в ту же папку, где находится CSS-файл. (Для загрузки файла перейдите по ссылке http://minkbooks.com/content/ font. ttf.)
Еще больше бесплатных шрифтов можно загрузить со страницы http://www.moorstation.org/typoasis/designers/ steffmann/.
Свойство @font-face требует указания еще по меньшей мере двух свойств для объявления шрифта и загрузки файла. Свойство font-family задает название, с помощью которого мы будем ссылаться на данный шрифт, а свойство src — URL-адрес файла с кодами для визуализации шрифта.
В листинге 3.10 мы присвоили шрифту имя MyNewFont и указали в качестве источника файл font. ttf.
Файл шрифта должен находиться в том же домене, что и вебстраница (или в нашем случае на том же компьютере). Такое ограничение действует в нескольких браузерах, например Firefox.
После того как шрифт загружен, его можно использовать с любыми элементами документа, всего лишь указав имя шрифта (MyNewFont). Мы определили стиль font в правиле из листинга 3.10 так, чтобы заголовок выводился с использованием нового шрифта. Если же загрузка файла этого шрифта завершится ошибкой, то в качестве альтернативы будут применяться шрифты Verdana и Sans-serif.
Добавить комментарий