ホームページ > ウェブフロントエンド > CSSチュートリアル > JavaScript はユーザーのブラウザで表示できるすべてのフォントを検出できますか?

JavaScript はユーザーのブラウザで表示できるすべてのフォントを検出できますか?

DDD
リリース: 2024-11-30 21:46:13
オリジナル
368 人が閲覧しました

Can JavaScript Detect All Fonts a User's Browser Can Display?

ユーザーのブラウザで表示できるすべてのフォントをリストします

JavaScript はブラウザで表示可能なフォントを取得できますか?

はい、サポートされているすべてのフォントのリストを取得することができます。 JavaScript を使用するユーザーのブラウザ。これにより、ユーザーが選択できる使用可能なフォントを含むドロップダウンを作成できるようになります。

フォント検出の実装

http://www.lalit.org/lab/javascript を参照してください。効率的な JavaScript ソリューションの -css-font-detect:

コードスニペット:

var Detector = function() {
    // baseFonts
    var baseFonts = ['monospace', 'sans-serif', 'serif'];

    // testString
    var testString = "mmmmmmmmmmlli";

    // testSize
    var testSize = '72px';

    // helper functions
    var h = document.getElementsByTagName("body")[0];
    var s = document.createElement("span");
    s.style.fontSize = testSize;
    s.innerHTML = testString;

    // default measurements
    var defaultWidth = {};
    var defaultHeight = {};
    for (var index in baseFonts) {
        s.style.fontFamily = baseFonts[index];
        h.appendChild(s);
        defaultWidth[baseFonts[index]] = s.offsetWidth; //width for the default font
        defaultHeight[baseFonts[index]] = s.offsetHeight; //height for the defualt font
        h.removeChild(s);
    }

    this.detect = function(font) {
        var detected = false;
        for (var index in baseFonts) {
            s.style.fontFamily = font + ',' + baseFonts[index];
            h.appendChild(s);
            var matched = (s.offsetWidth != defaultWidth[baseFonts[index]] || s.offsetHeight != defaultHeight[baseFonts[index]]);
            h.removeChild(s);
            detected = detected || matched;
        }
        return detected;
    };
};
ログイン後にコピー

動作原理

このコードは、さまざまなフォント間での文字の独特な外観を利用しています。特定のフォントでレンダリングされたテキストの幅と高さをベース フォントでレンダリングされたテキストと比較することにより、ターゲット フォントがサポートされているかどうかが判断されます。

以上がJavaScript はユーザーのブラウザで表示できるすべてのフォントを検出できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート