2011-08-22 5 views
6

私は、Webdingsグリフを使用する正常に劣化するコードを書きたいと思います。おそらくWebdingsはuniversally available across platformsというフォントの1つですが、奇妙な理由でWebdingsが存在しない場合は、ブラウザにそのフォントをデフォルトフォントで表示させたくありません。フォントが利用できない場合、テキストを非表示にする方法はありますか?

これを行う方法はありますか?

+1

代わりに、 '@ font-face'を使用してフォールバックフォントを埋め込む必要があります。これはテキストを隠すよりはるかに優れており、「すべてのブラウザ」で機能します。 – thirtydot

+0

あなたはそうです。それは本当に質問の精神の中で最も解決策です。これを答えとして書いて、私はそれを受け入れます。 –

答えて

2

...あなたはそれをこのように使用できるように、このフォントの権利を持っていることになっている場合、私は知らない、著作権についてのだろうコメント:

代わりに、@font-faceを使用してフォールバックフォントを埋め込む必要があります。 テキストを隠すよりもはるかに優れており、すべてのブラウザで " "で動作します。

@font-faceを処理するには、Font Squirrel Generatorを使用することをお勧めします。非常に簡単です。

1

フラッシュのみで、どのフォントがコンピュータにインストールされているかを検出できます。 Flashでフォントリストを取得し、このリストをJavaScriptに渡す方法を示すブログ記事があります。あなたはJavaScriptでそれを持っていたら、テキストを表示/非表示が容易であるべき:

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

+0

面白い答えと知っておきたいこと。 –

2

あなたはjQueryを使って、このような何かを行うことができます:

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

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

要素のフォントを確認するためにチェックします。それがなければ、あなたはそれを隠す。

+3

これはうまくいかない - CSSをVerdanaに設定し、Verdanaが実際に利用可能でない場合、jQueryはCSSを "Verdana"として報告する予定です。 –

+0

このスクリプトはスタイルシートから読み取りますが、これはフォントの可用性を示すものではありません。 –

1

JavaScriptのフォントの可用性をテストするネイティブな方法はありません。

しかし、lalitが実現したように、「各文字が異なるフォントで表示されるため、同じフォントサイズの同じ文字列に対して、異なるフォントの幅と高さが異なります。

彼は素晴らしい記事を書かれて、ちょうどそれを行うためのコードのまともな作品を作成しました:http://www.lalit.org/lab/javascript-css-font-detect/

1

あなたはすべての人が互換性CSS3を持つことを意味し、あなたのウェブサイト上でのフォントを持っているCSS3プロパティを使用することができますウェブブラウザはあなたが望むように "テキスト"を見るでしょう。私が言ったように

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

私の唯一の先入観は今

関連する問題