шрифты

Как заменить логотип картинкой?

Nikel, 16.11.2013

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

Замена шрифта изображением

Какие же популярные методы замены шрифта изображением существуют на данный момент?

a. Метод  FIR (span скрывается c помощью display:none)

Самый простой метод. Здесь и далее в качестве примера будем использовать один и тот же логотип в двух вариантах со ссылкой на главную страницу и без ссылки (адрес изображения — logo-1.gif замените на свой). Стили css

html код

  • Недостатки — Многие наиболее популярные устройства чтения с экрана игнорируют элементы, свойству display которых присвоено значение попе или hidden. не работает, когда изображения отключены, а таблицы CSS подключены.
  • Достоинства — при отключении стилей текст будет выводиться. Простота.

 

b. Метод  Phark (использование отрицательного отступа)

Стили css

html код

  • Недостатки — метод Phark не работает, когда изображения отключены, а таблицы CSS подключены.
  • Достоинства — метод замены изображений, дружественный к устройствам чтения с экрана и не требующий добавления несемантического разделителя div или span.

c. Метод  Гилдера-Левина (позиционирование рисунка над текстом)

html код

  • Недостатки — несемантический пустой тег
  • Достоинства — метод  прекрасно работает с устройствами чтения с экрана и позволяет видеть текст, когда изображения отключены, а таблицы CSS подключены.

d. Метод Лэнгбриджа-Лихи

html-код

  • Недостатки- метод не работает, когда изображения отключены, а таблицы CSS подключены.
  • Достоинства — Нет необходимости добавлять дополнительные элементы, все делается через стили.

e. Метод  Скотта  Келлума

html код

  • Недостатки -метод не работает, когда изображения отключены, а таблицы CSS подключены.
  • Достоинства — простота, отсутствие дополнительных несемантических элементов.

f. Метод прозрачность шрифта

  • Недостатки -метод не работает в старых браузерах