Как найти текст в изображениях с помощью элемента управления браузера + F

У HTML-страниц со многими разделами и в каждом разделе есть заголовок раздела, отображаемый как изображение (для использования хорошего шрифта). Проблема в том, что даже если я укажу текст «alt» и «title» на каждом изображении/названии, функция браузера Ctrl + F не находит текст. Мысль о двух возможных решениях, но не очень понравилась имКак найти текст в изображениях с помощью элемента управления браузера + F

1) Используйте встроенные шрифты. Проблема: не удается найти шрифт, необходимый клиенту для использования, и не знать об авторских правах.

2) Имейте текст на изображении в DIV рядом с изображением, но скрытый от пользовательского вида. Проблема: могут ли поисковые системы рассматривать это ключевое слово начинкой? Будет ли браузер искать текст, если дисплей: нет

У кого-нибудь есть лучшее решение? Благодаря Рига

источник

2010-06-11 Riga

Ответ на вопрос Q2. Нет CTRL-F не будет работать для текста внутри divs, скрытых с помощью 'display: none'. –

Браузеры не могут искать текст на изображениях. 'display: none' также не решит вашу проблему. Я предлагаю использовать изображения только там, где это необходимо. Заголовки обязательно должны быть написаны простым текстом. – hudolejev

Чтобы ответить на Q2, вы можете скрыть текст из пользовательского вида без использования дисплея: none; , Juste должен добавить margin-left: -9999; –

Как правило, лучший подход к замене изображений заключается в том, чтобы делать это исключительно в таблице стилей.

HTML, должен по-прежнему выглядеть следующим образом:

<h2 id="fantastic-section-of-awesomeness"><span>This is an Ordinary Heading</span></h2>

Вашего CSS может затем сделать:

h2#fantastic-section-of-awesomeness { 
    background: ...; /* The replacement image */ 
} 
h2 span { 
    text-indent: -100000px; 
}

Обратите внимание, что текст на самом деле не скрыт. Некоторые устройства чтения с экрана неправильно интерпретируют display: none; (даже если они указаны в таблице стилей media="screen"). Вместо этого мы просто сдвигаем его далеко от левой стороны экрана, где это невозможно реально увидеть.

Я специально не протестировал это для Ctrl + F, но тот факт, что текст по-прежнему технически заметен, должен позволить браузеру его найти.

Будет не сможет выделить изображение как совпадение, однако это может привести к путанице. Нет никакого реального способа обойти это без использования @font-face.

источник

2010-06-11 13:23:49 VoteyDisciple

Хм ... Я собирался рекомендовать Cufon в качестве альтернативы использовать сгенерированные изображения, но он не идеален: Поиск работы в Firefox, но не слишком хорошо (плохо позиционирование и нет подсветки).

Натюрморт лучше, чем изображения в виде заголовков.

источник

2010-06-11 13:16:55

Для достижения этой цели я использовал typeface.js Javascript library

Вы можете генерировать пользовательские шрифты для этой библиотеки, используя этот generator

Эти сайты также примеры и инструкции по использованию.

источник

2010-06-11 13:21:02 gruntled

Пробовал Ctrl + F и не нашел текст – Riga

Я просматриваю некоторые из их примеров, и они не доступны для поиска. но я использую это на веб-сайте, где поиск работает нормально. Я посмотрю, есть ли для него определенный флаг. – gruntled

какая версия библиотеки шрифтов вы используете? – gruntled

Почему бы не попробовать Google Font Directory

Справочник шрифтов Google позволяет просматривать все шрифты, доступные через Google Font API. Все шрифты в каталоге доступны для использования на на вашем веб-сайте под открытым кодом и обслуживаются серверами Google .

источник

2010-06-11 13:23:04

Шрифт, требуемый моим клиентом, не входит в набор, предоставляемый Google. Мой клиент не уверен в авторских правах Пробовал с FFox 3.6, и все шрифты выглядят одинаково. – Riga

Вы можете также использовать Z-индекс элементов:

<html> 
    <body> 
     ... 
     <div> 
      <div style="position:absolute; z-index: 1">My Section Header</div> 
      <div style="position:absolute; z-index: 2"><img src="test.png"/></div> 
     </div> 
     ... 
    </body> 
</html>

Изображение находится в передней части текста, так что пользователь видит только изображение, но может найти раздел, когда он ищет «Мой раздел Заголовок».

источник

2010-06-11 13:27:41

Как найти текст в изображениях с помощью элемента управления браузера + F

ответ

Смежные вопросы