C'è un modo per nascondere il testo se un carattere non è disponibile?

Question

Mi piacerebbe scrivere codice che degrada con grazia utilizzando un glifo Webdings. Presumibilmente Webdings è uno di quei font che è universally available across platforms, ma non voglio che il browser visualizzi il carattere nel suo font predefinito se per qualche strana ragione Webdings non è presente.

C'è un modo per farlo?

Answer 1

Come ho già detto in un commento:

Invece di quello, è necessario utilizzare @font-face per incorporare un font di fallback. È molto meglio che nascondere il testo e funziona in "tutti i browser ".

Preferisco utilizzare Font Squirrel Generator per gestire @font-face. Lo rende molto, molto facile.

Answer 2

Solo Flash consente di rilevare quali tipi di carattere sono installati sul computer. C'è un post sul blog per mostrare come ottenere l'elenco dei font in Flash e passare questo elenco a JavaScript. Una volta che avete in JavaScript, dovrebbe essere facile per nascondere/mostrare il testo:

http://rel.me/2008/06/26/font-detection-with-javascript-and-flash/

Answer 3

Si potrebbe fare qualcosa di simile con jQuery:

$('p').each(function(){ 
    var s = $(this).css('font-family'); 
    if(s != "verdana"){ 
     $(this).hide(); 
    }  
}); 

Esempio: http://jsfiddle.net/jasongennaro/GXjvK/

Quindi controlli per vedere il font per l'elemento. Se non è lì, lo nascondi.

Answer 4

Non esiste un modo nativo per verificare la disponibilità dei caratteri in JavaScript.

Tuttavia, come ha realizzato lalit, dal momento che "ogni carattere appare in modo diverso in caratteri diversi, diversi tipi di carattere avranno larghezza e altezza diverse per la stessa stringa di caratteri della stessa dimensione del carattere".

Ha scritto un bell'articolo, e ha creato un pezzo di codice decente per fare proprio questo: http://www.lalit.org/lab/javascript-css-font-detect/

Answer 5

Si potrebbe utilizzare una proprietà CSS3 per avere il carattere sul vostro sito web che significa che tutte le persone che hanno compatibile un CSS3 il browser Web vedrà il "testo" come desideri.

@font-face { 
font-family: myFirstFont; /* in your case webdings */ 
src: url('Sansation_Light.ttf'), 
url('Sansation_Light.eot') format("opentype"); /* IE */ 
} 

La mia unica preoccupazione ora sarebbe di circa i diritti d'autore, non so se si suppone di avere diritti su questo tipo di carattere per essere in grado di utilizzare in questo modo ...