Сокрытие текста как отступ шрифта? - PullRequest
Новая
       20

Сокрытие текста как отступ шрифта?

2 голосов
/ 14 августа 2010

Я пытаюсь закодировать чистый сайт HTML5. Я использую шаблон html5 в качестве основы веб-сайта. Идет с модернизром. Для заголовка страницы я использую text-shadow и font-face и настроил небольшой запасной вариант css с помощью modernizr (когда одна из функций недоступна, изображение png будет показано в качестве фона).

Итак, код 

<h1 id="header-title">Title here</h1>

Но, как вы уже догадались, когда я установил резервное изображение png в качестве фона, текст «Заголовок здесь» все еще там. Вы знаете какой-нибудь способ вынуть этот текст? Я хочу, чтобы он был максимально чистым. Вот почему я не использовал текстовый отступ или javascript, чтобы стереть innerHTML.

Ответы [ 3 ]

2 голосов
/ 14 августа 2010

С modernizr вы, вероятно, захотите правило CSS вроде 

body.no-fontface #header-title { 
  text-indent: -9999px; 
}

Редактировать

Полагаю, вы можете просмотреть эту страницу и выбрать: http://css -tricks.com / css-image-replace / /

2 голосов
/ 15 августа 2010

Я полагаю, что лучшим вариантом было бы использовать метод замены изображений Гилдера / Левина - текст остается, но скрыт графикой.

Google, похоже, согласен с этим, как обсуждалось в этой ссылке, если только он не обманчив по своей природе. (и если ваша графика говорит то же самое, что и текст, который вы не вводите в заблуждение)

http://mezzoblue.com/archives/2008/05/05/image_replac/

На сайте Mezzoblue также есть краткий обзор всех популярных методов замены изображений.

Вот метод Гилдера / Левина (скопированный непосредственно с сайта Mezzoblue) - вы добавляете пустой тег span, в котором находится ваше замещающее изображение, и с абсолютным позиционированием укладываете его поверх исходного текста. Теперь, возможно, дополнительный тег span не соответствует вашим «чистым» требованиям, но любая другая техника, которая скрывает или удаляет настоящий текст, на мой взгляд, хуже.

Может быть, самое чистое решение - немного ухудшенный опыт для посетителей, которые не могут использовать шрифт? При правильной настройке вы должны быть в состоянии охватить 99 процентов посетителей с помощью at-font-face. 

<h3 id="header">
    <span></span>Revised Image Replacement
</h3>

/* css */
#header {
    width: 329px;
    height: 25px;
    position: relative;
    }
#header span {
    background: url(sample-opaque.gif) no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    }

** ОБНОВЛЕНИЕ **

Единственным недостатком Гилдера / Левина является то, что замещающее изображение должно быть непрозрачным. Если он прозрачный, исходный текст может отображаться в зависимости от того, как выглядит рисунок.

Метод Leahy / Langridge будет работать с прозрачными изображениями (Apple использует эту технику для своего навигационного меню) - единственный недостаток, который я знаю, это то, что если кто-то просматривает с отключенными изображениями и включенным css, они могут не вижу никакого контента.

снова, с сайта Mezzoblue 

<h3 id="header">
    Revised Image Replacement
</h3>

/* css */
#header {
    padding: 25px 0 0 0;
    overflow: hidden;
    background-image: url(sample-opaque.gif);
    background-repeat: no-repeat;
    height: 0px !important;
    height /**/:25px;
    }

другой вариант, если сбой сценария «css-on, images-off» недопустим - однопиксельная замена изображения . Технику можно найти на
mezzoblue.com/tests/revised-image-replacement/
и, как отмечено в другом ответе
css-tricks.com/css-image-replacement/
(извините за неполные ссылки - в настоящее время мне разрешена только 1 ссылка на пост. добавьте www в начало каждого из предыдущих URL-адресов для просмотра ассортимента методов замены изображений)

0 голосов
/ 14 августа 2010

Поместите текст в span и установите для span значение visibility: hidden.

...