Как найти текст в изображениях с браузером control+F
Имейте страницы HTML со многими разделами, и каждому разделу отобразили заголовок раздела как изображение (для использования хорошего шрифта). Проблема состоит в том что, даже если я указываю 'высокий звук' и текст 'заголовка' на каждом изображении/заголовке, функциональность браузера Ctrl+F не находит текст. Мысль два возможных решения, но не очень довольный ими
Использование встраивает шрифты. Проблема: не Может найти шрифт требуемым клиентом использовать и не уверенный в авторских правах.
Имейте текст в изображении в DIV около изображения, но скрытый от пользовательского представления. Проблема: поисковые системы могут рассмотреть это наполнение ключевого слова? Будет браузер находить текст если display:none
У кого-либо есть лучшее решение? Спасибо Рига
5 ответов
Как правило, лучший подход к замене изображений - делать это исключительно в таблице стилей.
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.
Почему бы не попробовать Каталог шрифтов Google
Каталог шрифтов Google позволяет просмотреть все шрифты, доступные через Google Font API. Все шрифты в каталог доступны для использования на ваш сайт с открытым исходным кодом лицензия и обслуживаются Google серверы.
Для этого я использовал typeface.js Javascript библиотеку
Вы можете генерировать пользовательские шрифты для этой библиотеки, используя этот генератор
На этих сайтах также есть примеры и инструкции по использованию.
Hmm... Я собирался порекомендовать Cufon как альтернативу использованию сгенерированных изображений, но он не идеален: Поиск работает в Firefox, но не слишком хорошо (плохое позиционирование и отсутствие подсветки).
Но все же это намного лучше, чем изображения в качестве заголовков.
Вы также можете использовать 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>
Изображение находится перед текстом, так что пользователь видит только изображение, но может найти раздел при поиске "My Section Header".