0

新しいブラウザーには @font-face を使用し、他のブラウザーにはイメージ置換を使用したい... @font-face がユーザーのブラウザーに存在することを確認するにはどうすればよいですか?

4

5 に答える 5

3

私はそれを自分で使ったことはありませんが、さまざまな最新のブラウザー機能を検出できるmodernizr JavaScript ツールがあります。

Modernizr は機能検出を使用して、rgba()、border-radius、CSS Transitions などの今後の機能に対して現在のブラウザーをテストします。これらは現在、ブラウザー間で実装されており、Modernizr を使用すると、まだサポートしていないブラウザーのフォールバックを簡単に制御できるため、今すぐ使用を開始できます。

試してみてください。JQuery には独自の機能検出機能がありますが、font-faceまだ検出できません。

于 2010-03-13T22:45:41.597 に答える
1

@ font-faceがユーザーブラウザに存在することを確認するにはどうすればよいですか？

ルールがルールオブジェクトに解析されているdocument.styleSheetsかどうかを確認するために、あちこち探し回ることができると思います。（IEの異なるスタイルシートモデルに必要なオブジェクトスニッフィングフォールバックを使用します。）@font-faceFONT_FACE_RULE

しかし、それは本当に良い考えではなく、おそらく正しい質問ではありません。ブラウザはサポートしているかもしれ@font-faceませんが、使用した特定のフォント形式（TTF / OTF / EOT / WOFF）はサポートしていません。おそらく、ブラウザ/ユーザースタイルシートは、ルールを上書きまたは無視するように設定されています。たぶん、フォントをネットワークからフェッチできなかったのかもしれません。ブラウザは埋め込みをサポートしていないかもしれませんが、とにかくユーザーはたまたま必要なフォントをインストールしていました。

より良い質問は、「私の特別なフォントは使用されていますか？」です。これを直接照会する方法はありませんが、通常offsetWidth、ターゲットフォントのテキストを含むインライン要素を調べて、フォールバックするフォントに設定されている別のテキストスパンの幅と比較することでわかります。ほぼ同一のメトリックを持つフォールバックフォントを選択するのに不運でない限り、結果が異なる可能性があります。

例えば。何かのようなもの：

<script type="text/javascript">
    function haveFont(face) {
        var span= $('<span style="visibility: hidden; font-size: 48px">jilf:.,!</span>')[0];
        document.body.appendChild(span);
        span.style.fontFamily= 'monospace';
        var width0= span.offsetWidth;
        span.style.fontFamily= '"'+face+'", monospace';
        var width1= span.offsetWidth;
        document.body.removeChild(span);
        return span.offsetWidth!==width;
    }

    window.onload= function() {
        if (!haveFont('My Embedded Font Bold Extranice')) {
            replaceHeadingsWithImages();
        }
    }
</script>
于 2010-03-14T00:18:02.657 に答える
1

ttf/otf サポート (svg ではない) を検出したい場合は、
これ
を使用する必要がifあります。else

于 2010-03-15T02:40:44.207 に答える
1

font-face-detectを使用したい。

于 2010-03-15T02:43:52.900 に答える
1

ブラウザ チェックを実行して、特定のブラウザで処理を行うこともできます。ブラウザのバージョンも確認できると思いますが、@font-face の詳細については、100% 確信が持てません。

<script type="text/javascript">
  $(document).ready(function(){

    var browser;
    if($.browser.mozilla)
      //Firefox
     $("p").css("font-style","...");
    else if($.msie)
      // Internet Explorer
     $("p").css("font-style","...");
    else if($.browser.opera)
      // Opera
     $("p").css("font-style","...");
    else if($.browser.safari)
      // Safari
     $("p").css("font-style","...");
    else
      //Unknown
     $("p").css("font-style","...");

    $('#browserName').append(browser);
  });
于 2010-03-13T22:52:11.720 に答える