Come trovare testo nelle immagini con il controllo del browser + F

Dispone di pagine HTML con molte sezioni e ogni sezione ha un titolo di sezione visualizzato come un'immagine (per utilizzare un font piacevole). Il problema è che anche se si specifica un testo "alt" e "titolo" su ogni immagine/titolo, la funzionalità del browser Ctrl + F non trova il testo. Ho pensato due possibili soluzioni ma non ne sono molto contentoCome trovare testo nelle immagini con il controllo del browser + F

1) Usa caratteri incorporati. Problema: impossibile trovare il carattere richiesto dal client da utilizzare e non sicuro sui diritti d'autore.

2) Avere il testo nell'immagine in DIV vicino all'immagine ma nascosto dalla vista utente. Problema: i motori di ricerca possono considerare questo riempimento di parole chiave? Il browser troverà il testo se viene visualizzato: nessuno

Qualcuno ha una soluzione migliore? Grazie Riga

fonte

2010-06-11 Riga

Per rispondere a Q2. No, CTRL-F non funzionerà per il testo all'interno di div nascosti con 'display: none'. –

I browser non possono cercare il testo nelle immagini. 'display: none' non risolverà il tuo problema. Suggerisco di usare le immagini solo dove è necessario per loro. I titoli dovrebbero essere sicuramente scritti con testo semplice. – hudolejev

Per rispondere anche a Q2, è possibile nascondere il testo dalla vista utente senza utilizzare display: nessuno; . Juste deve aggiungere margin-left: -9999; –

In genere, l'approccio migliore alla sostituzione delle immagini è di farlo esclusivamente all'interno del foglio di stile.

Il codice HTML dovrebbe comunque essere simile:

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

tuo CSS possono poi fare:

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

Si noti che il testo non è nascosto. Alcuni lettori di schermo interpretano in modo errato display: none; (anche se forniti in un foglio di stile media="screen"). Invece, lo spostiamo semplicemente lontano dal lato sinistro dello schermo, dove non può essere visto realisticamente.

Non l'ho testato specificamente per Ctrl + F, ma il fatto che il testo sia ancora tecnicamente visibile dovrebbe consentire al browser di trovarlo.

Sarà non essere in grado di evidenziare l'immagine come una corrispondenza, tuttavia, che può ancora portare a confusione. Non c'è un modo reale per farlo senza usare uno @font-face.

fonte

2010-06-11 13:23:49 VoteyDisciple

Hmm ... stavo per raccomandare Cufon come alternativa all'utilizzo di immagini generate, ma non è perfetto: Searching opere in Firefox, ma non troppo bene (male posizionamento e senza evidenziazione).

Ancora meglio delle immagini come titoli.

fonte

2010-06-11 13:16:55

per raggiungere questo obiettivo ho usato i caratteri personalizzati typeface.js Javascript library

È possibile generare per questa libreria utilizzando questo generator

Questi siti hanno anche esempi e istruzioni d'uso.

fonte

2010-06-11 13:21:02 gruntled

Ho provato Ctrl + F e non ho trovato il testo – Riga

Sto guardando alcuni dei loro esempi e non sono ricercabili. ma sto usando questo su un sito web in cui la ricerca funziona bene. Vedrò se c'è una bandiera specifica per questo. – gruntled

quale versione della libreria di caratteri stai usando? – gruntled

perché non provare la Google Font Directory

The Font Directory di Google ti consente di sfogliare tutti i font disponibili tramite il Google Font API. Tutti i font nella directory sono disponibili per il il tuo sito web con una licenza open source e sono serviti dai server di Google .

fonte

2010-06-11 13:23:04

Il font richiesto dal mio client non è nel set fornito da Google. Il mio cliente non è sicuro del copyright Provato con FFox 3.6 e tutti i tipi di carattere sono uguali. – Riga

È inoltre possibile utilizzare lo z-index su elementi:

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

L'immagine è di fronte al testo in modo che l'utente vede solo l'immagine, ma può trovare la sezione quando si cerca "la mia sezione Intestazione".

fonte

2010-06-11 13:27:41

Come trovare testo nelle immagini con il controllo del browser + F

risposta

Problemi correlati