С помощью простого трюка CSS вы можете улучшить представление шрифтов на своих веб-страницах. При этом и неграфические броузеры и поисковые роботы смогут с ними нормально работать.
Введение
Вы мечтаете получить типографское качестве заголовков и декоративных шрифтов с помощью изображений вместо "голого" HTML? При всех тех богатых возможностях форматирования текста, имеющихся в CSS, иногда трудно удержаться от желания открыть AdobePhotoshop и набрать там текст любимым шрифтом, задав при этом нужный размер, кернинг и трекинг. Вам ведь известно, что если вставить такое изображение в веб-страницу, то любой пользователь Сети, броузер которого способен показывать графику, увидит ваш шрифтовой шедевр так, как вы и задумывали. Верно?
Но нас за это так часто били по рукам, приговаривая, что за использование имиджей вместо обычных шрифтов на веб-страницах мы попадём прямо в ад. Так постепенно, мы снижали свои визуальные требования и расстались с мыслью о том, что на веб-страницах когда-нибудь снова появится красивый шрифт. Расстались до тех пор, пока много лет спустя функция загрузки шрифтов, предусмотренная в CSS, не станет надежной и не получит должного распространения.
Нас учили, что изображения не всегда доступны для всех броузеров в отличие от простого текста. Это особенно справедливо для специфических броузеров и портативных устройств с небольшими экранами. Так что отливая текст в виде изображений, мы должны испытывать угрызения совести. Ведь текстовые броузеры (такие как Lynx) или же броузеры с отключенным показом изображений не покажут наши картинки. Даже если мы настолько ответственны в работе, что не забываем прописать для каждого элемента графики атрибут alt, поисковые роботы часто индексируют метаданные (подобно содержимому атрибутов alt и title) не так, как "чистый" HTML. Это станет понятно, если мы рассмотрим логическую важность заголовка текста, помещённого между тегами <hn></hn>. Что уж говорить о проблемах с размерами файлов и временем загрузки страниц, перегруженных графикой.
Давайте-ка отложим на время всю эту информацию в сторонку. Так ли уж плохи изображения на самом деле? С помощью небольших трюков CSS, чуть более осторожном планировании и тестировании, можно получить красивые шрифты на веб-страницах, и при этом страница останется доступной для всех (см. заметку ниже), даже для индексирующих роботов. Время снова расправить крылья!
Основная идея
Возможно вы искали - Реферат: Дизайн для портативных устройств: ваш веб-сайт на маленьком экране
Основная идея очень проста: мы напишем небольшую строчку текста (например "Helloworld!") и поместим её внутрь двух наборов HTML-тегов. Затем с помощью CSS мы спрячем этот текст, а вместо него покажем фоновое изображение, которое будет содержать те же самые слова. Вот и всё. Заменить текст изображением не так сложно, как кажется.
Прежде чем браться за CSS, давайте создадим простой код HTML-разметки. Представьте, что у нас имеется что-то вроде этого:
<div>
<span>Helloworld!</span>
</div>
Похожий материал - Реферат: Десять главных ошибок веб-менеджера
Само собой, мы могли бы просто оформить сам текст с помощью стилей. Но нам-то нужно что-то более искусное, чем детская игра со значениями для свойств font-family или text-transform. Мы ведь хотим пышности! Раз уж мы говорим "Привет!" миру, то нужно делать это щёгольски, верно?
Выберем для нашего приветствия миру самый подходящий шрифт, скажем, ShelleyAllegro. Мы считаем, что хорошо известный в среде дизайнеров ShelleyAllegro настолько блистателен, что легко покорит сердца миллионов, когда мы с его помощью скажем "Hello!". По нашим сведениям этот шрифт доступен лишь на 1,65 % компьютеров во всём мире. Потому, потратим чуть-чуть времени и создадим изображение со все тем же текстом "Helloworld!". Любой пользователь любого броузера, в котором не отключен показ изображений, увидит наше приветствие, набранное шрифтом ShelleyAllegro даже на тех компьютерах, где он не установлен.
Запомним, что высота изображения составляет 35 пикселов, так как эта информация понадобится нам в дальнейшем.
Итак, у нас есть кусочек HTML кода, великолепное послание миру в виде текста и оно же в виде презренного изображения. Что же мы с ними сделаем? Давайте закатаем рукава и используем небольшую таблицу стилей для замены текста изображением.
Очень интересно - Доклад: Аутсорсинг тестирования — точим чужое оружие
Замена изображением. Метод Фарнера
Этот метод назван в честь Тодда Фарнера (ToddFahrner) - одного из людей, которых впервые посетила эта идея. Вас может удивить наличие вокруг строки приветствия двух тегов - div и span. Фактически, вместо них могли бы быть любые другие, необходимые конкретно для ваших задач. Но мы будем использовать в нашем примере именно эти "оберточные" теги.
Таблица стилей, которая осуществляет подмену, состоит из двух простых стилевых правил. Во-первых, используются с помощью набора свойств фона (background) мы помещаем наше изображение на задний план элемента div.
div {
background-image:url("hello_world.gif");
Вам будет интересно - Доклад: Инструменты необходимые для тестирования Linux
background-repeat:no-repeat;
height:35px;
}
Обратите внимание на свойство height. Его значением является действительная высота нашего изображения, тем самым обрамляющий div обязан показать изображение полностью, заняв ровно столько по высоте, сколько нужно - ни больше ни меньше. Свойство background-repeat в данном случае указывает на то, что фоновое изображение не должно автоматически повторяться вдоль вертикали и горизонтали.
Нам остаётся лишь скрыть текстовую строку, изначально помещённую в HTML код. Вот для чего появился тег span - мы нуждаемся во втором элементе, чтобы непосредственно к нему можно было бы "привязать" невидимость. Это легко осуществить.
Похожий материал - Доклад: Проблемы интеграции: Mercury Interactive QuickTest & TestDirector
span {display:none;}
Объединим эти два небольших стилевых правила с исходным куском HTML кода, и мы получим простой результат. Это настолько просто, что даже непонятно, почему для объяснения этого способа понадобилось столько слов?
Конечно же, мы не оставим нашу разметку столь немудрёной. И стилевые правила нам придется немного усложнить. В противном случае любой из наших тегов <div> на странице содержал бы фоновое изображение со словами "Helloworld!", а всё, что мы помещали бы на странице внутри любых тегов <span></span>, не показывалось бы на экране.
Что ж, давайте перейдём к рассмотрению нескольких реальных примеров.