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

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

8 голосов
/ 11 июня 2010

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

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

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

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

Ответы [ 5 ]

5 голосов
/ 11 июня 2010

Почему бы не попробовать Каталог шрифтов Google

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

2 голосов
/ 11 июня 2010

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

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.

2 голосов
/ 11 июня 2010

Для этого я использовал библиотеку Javascript typeface.js

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

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

0 голосов
/ 11 июня 2010

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

<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>

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

0 голосов
/ 11 июня 2010

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

Еще лучше, чем изображения в качестве заголовков.

...