Me gustaría escribir con gracia degradante código que utiliza un glifo Webdings. Supuestamente Webdings es una de esas fuentes que es universally available across platforms, pero no quiero que el navegador muestre el carácter en su fuente predeterminada si por alguna extraña razón Webdings no está allí.¿Hay alguna manera de ocultar texto si una fuente no está disponible?
¿Hay alguna manera de hacer esto?
Como dije en una comment:
En lugar de eso, debe usar
@font-facepara incrustar una fuente alternativa. Eso es mucho mejor que ocultar el texto, y funciona en "todos los navegadores ".
Prefiero usar el Font Squirrel Generator para manejar @font-face. Lo hace muy, muy fácil.
Only Flash le permite detectar qué fuentes están instaladas en la computadora. Hay una publicación de blog allí para mostrar cómo obtener la lista de fuentes en Flash y pasar esta lista a JavaScript. Una vez que lo tienes en JavaScript, que debe ser fácil de ocultar/mostrar el texto:
http://rel.me/2008/06/26/font-detection-with-javascript-and-flash/
Interesante respuesta y es bueno saberlo. –
Se podría hacer algo como esto con jQuery:
$('p').each(function(){
var s = $(this).css('font-family');
if(s != "verdana"){
$(this).hide();
}
});
Ejemplo: http://jsfiddle.net/jasongennaro/GXjvK/
Entonces, verifica la fuente del elemento. Si no está allí, lo escondes.
Eso no funciona: si configura el CSS para Verdana, y si Verdana no está realmente disponible, jQuery todavía reportará el CSS como "Verdana". –
Este script lee de la hoja de estilo, que no indica la disponibilidad de una fuente. –
No hay forma nativa de comprobar la disponibilidad de fuentes en JavaScript.
Sin embargo, como lalit se ha dado cuenta, ya que "cada carácter se ve de manera diferente en diferentes fuentes, diferentes fuentes tomarán diferente ancho y alto para la misma cadena de caracteres del mismo tamaño de fuente".
ha escrito un buen artículo, y ha creado una pieza decente de código para hacer precisamente eso: http://www.lalit.org/lab/javascript-css-font-detect/
usted podría utilizar una propiedad CSS 3 para tener el tipo de letra en su página web lo que significa que todas las personas que tienen compatibilidad un CSS3 el navegador web verá el "texto" como lo desee.
@font-face {
font-family: myFirstFont; /* in your case webdings */
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot') format("opentype"); /* IE */
}
Mi única preocupación ahora sería de unos derechos de autor, no sé si se supone que debes tener derechos sobre esta fuente de poder usarlo de esta manera ...
En lugar de eso, debe usar '@ font-face' para incrustar una fuente alternativa. Eso es mucho mejor que ocultar el texto, y funciona en "todos los navegadores". – thirtydot
Tienes razón, esa es realmente la solución más acorde con el espíritu de la pregunta. Escribe esto como una respuesta y lo aceptaré. –