Cómo buscar texto en las imágenes con el control del navegador + F

Tiene páginas HTML con muchas secciones y cada sección tiene un título de sección que se muestra como una imagen (para usar una fuente agradable). El problema es que incluso si especifico un texto 'alt' y 'title' en cada imagen/título, la funcionalidad del navegador Ctrl + F no encuentra el texto. Pensó en dos posibles soluciones, pero no muy contento con ellasCómo buscar texto en las imágenes con el control del navegador + F

1) Use fuentes de inserción. Problema: No se puede encontrar la fuente requerida por el cliente para usarla y no estoy seguro acerca de los derechos de autor.

2) Tenga el texto en la imagen en DIV cerca de la imagen pero escondido de la vista del usuario. Problema: ¿Pueden los motores de búsqueda considerar este relleno de palabras clave? ¿Buscará el navegador texto si se visualiza: ninguno

¿Alguien tiene una solución mejor? Gracias Riga

Fuente

2010-06-11 Riga

Para responder Q2. No, el CTRL-F no funcionará para el texto dentro de los divs ocultos con 'display: none'. –

Los navegadores no pueden buscar texto en las imágenes. 'display: none' tampoco resolverá su problema. Sugiero usar imágenes solo donde sea necesario. Los títulos definitivamente deben escribirse con texto sin formato. – hudolejev

Para responder Q2 también, puede ocultar el texto de la vista del usuario sin usar la pantalla: ninguno; . Juste tiene que agregar margen-izquierda: -9999; –

Generalmente, el mejor enfoque para el reemplazo de imágenes es hacerlo exclusivamente dentro de la hoja de estilos.

El HTML todavía debe verse como:

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

Su CSS a continuación, puede hacer:

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

Tenga en cuenta que el texto no es en realidad oculta. Algunos lectores de pantalla interpretan incorrectamente el display: none; (incluso cuando se proporciona en una hoja de estilo media="screen"). En cambio, simplemente lo desplazamos lejos del lado izquierdo de la pantalla donde no se puede ver de forma realista.

No he probado específicamente esto para Ctrl + F, pero el hecho de que el texto aún sea técnicamente visible debería permitir que el navegador lo encuentre.

Será no podrá resaltar la imagen como una coincidencia, sin embargo, lo que aún puede generar confusión. No hay manera de evitarlo sin usar un @font-face.

Fuente

2010-06-11 13:23:49 VoteyDisciple

Hmm ... que iba a recomendar Cufon como una alternativa al uso de imágenes generadas, pero no es perfecta: la búsqueda funciona en Firefox, pero no demasiado bien (mal posicionamiento y sin resaltado).

Todavía mucho mejor que imágenes en los titulares.

Fuente

2010-06-11 13:16:55

Para lograr esto he utilizado las fuentes personalizadas typeface.js Javascript library

Puede generar para esta biblioteca utilizando esta generator

Estos sitios también tienen ejemplos e instrucciones de uso.

Fuente

2010-06-11 13:21:02 gruntled

Intenté Ctrl + F y no encontré el texto – Riga

Estoy viendo algunos de sus ejemplos y no se pueden buscar. pero estoy usando esto en un sitio web donde la búsqueda funciona bien. Veré si hay una bandera específica para eso. – gruntled

¿qué versión de la biblioteca tipográfica estás usando? – gruntled

Por qué no probar el Google Font Directory

La fuente Directorio de Google le permite navegar todas las fuentes disponibles a través de la API de Google Fuente. Todas las fuentes en el directorio están disponibles para su uso en su sitio web bajo una licencia de código abierto y son atendidas por los servidores Google .

Fuente

2010-06-11 13:23:04

La fuente requerida por mi cliente no está en el conjunto proporcionado por Google. Mi cliente no está seguro sobre el copyright Probado con FFox 3.6 y todas las fuentes tienen el mismo aspecto. – Riga

También es posible usar el índice z de los elementos:

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

La imagen está en frente del texto para que el usuario sólo ve la imagen, pero se puede encontrar la sección cuando se busca "Mi Sección Encabezamiento".

Fuente

2010-06-11 13:27:41

Cómo buscar texto en las imágenes con el control del navegador + F

Respuesta

Cuestiones relacionadas