3

ユーザーが特定のフォント フェイスを持っているかどうかに基づいて、HTML ファイルに表示されるテキストを変更する方法はありますか (JavaScript を使用しないことが望ましい)。

たとえば、表示したいフォントフェイス「AlphaIcons」がある場合：

<span>A</span>

それ以外の場合は、表示したい:

<span><img src="apple.png">Apple</span>

(この場合、フォントなしでユーザーにフォントを提供することはできません)。

4

2 に答える 2

3

編集済み*** この投稿をチェックしてください - それはあなたを正しい方向に導くかもしれません： jQueryを使ったFont-Familyに基づいてBody Font-Sizeを変更する

最初の回答では、フォントを検出できる新しいライブラリが提供されます。true/false ブール値を与えることができれば、イメージ スワップに書き込むことができる場合があります。

font-family を使用すると、使用するフォントに優先順位が付けられます。ユーザーのシステムで最初のフォントが見つからない場合は、次のフォントに進みます。

http://www.w3schools.com/css/css_font.asp

次のようにcssを使用してください：

span {
    font-family:"AlphaIcons", "Times New Roman", Times, serif;
}

それとも私は何かが欠けていますか???

JavaScript を使用してより洗練されたフォントを作成したい場合は、Google の Web フォント ライブラリをチェックしてください: http://www.google.com/webfonts

于 2012-11-06T00:17:13.967 に答える
2

これは、純粋な HTML や CSS では確認できません。この問題を処理するには Javascriptが必要です。

次の手順を実行します。

  • font-face 経由でフォント ファイルを埋め込む
  • JavaScript を使用して、クライアント ブラウザで font-face が利用可能かどうかを検出します。たとえば、 modernizrはそのトリックを行うことができます
  • font-face が利用できない場合は、次のコードを使用してイメージをスパンに挿入します。

HTML

<span data-image="apple.png">A</span>

Javascript

// check font face compatibility
if (!Modernizr.fontface) {

    // replace each span content with the right image
    $('span').each(function(){

        // get the image 
        var image = $(this).data('image');

        // insert this image into the span tag  
        $(this).html('<img src="'+image+'" />');
    });
}

データ属性は、考えられる多くの解決策の 1 つにすぎません。少しだけヒント。

一般に、Javascript を使用せずにフォントが使用可能かどうかを確認する方法はありません。

于 2012-11-05T23:57:11.210 に答える