Is there a way to hide text if a font is unavailable?

I'd like to write gracefully-degrading code that uses a Webdings glyph. Supposedly Webdings is one of those fonts that is universally available across开发者_如何学运维 platforms, but I don't want the browser to display the character in its default font if for some strange reason Webdings isn't there.

Is there any way to do this?

As I said in a comment:

Instead of that, you should use @font-face to embed a fallback font. That's much better than hiding the text, and it works in "all browsers".

I prefer to use the Font Squirrel Generator to handle @font-face. It makes it very, very easy.

You could do something like this with jQuery:

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

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

So you check to see the font for the element. If it's not there, you hide it.

There is no native way to test for font availability in JavaScript.

However, as lalit has realized, since "each character appears differently in different fonts, different fonts will take different width and height for the same string of characters of same font-size".

He has written up a nice article, and created a decent piece of code to do just that: http://www.lalit.org/lab/javascript-css-font-detect/

Only Flash allows you to detect which fonts are installed on the computer. There's a blog post there to show how to get the font list in Flash and pass this list to JavaScript. Once you have it in JavaScript, it should be easy to hide/show the text:

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

You could use a CSS3 property to have the font on your website meaning that all persons having a CSS3 compatible web browser will see the "text" as you wish.

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

My only preoccupation now would be about copyrights, I don't know if you're supposed to have rights on this font to be able to use it this way…