JavaScript はユーザー フォントの選択に利用可能なフォントをどのように検出できますか?

ユーザーのカスタマイズでサポートされているフォントの検出

質問:

JavaScript を使用して取得する方法ブラウザ ユーザーにフォント選択機能を提供するために表示できるすべてのフォントのリスト?

答え:

Lalit Patel の JavaScript フォント検出ライブラリ: http://www.lalit.org/lab/javascript-css-font-detect

コード:

/**
 * Detector JavaScript code to identify available fonts in a browser.
 */
var Detector = function() {
    // Base fonts for comparison against candidate fonts
    var baseFonts = ['monospace', 'sans-serif', 'serif'];

    // Test string with characters of varying widths and heights
    var testString = "mmmmmmmmmmlli";

    // Test font size
    var testSize = '72px';

    // Append a SPAN element to the body for font width measurement
    var s = document.createElement("span");
    s.style.fontSize = testSize;
    s.innerHTML = testString;

    var defaultWidth = {}, defaultHeight = {};

    // Calculate default widths for base fonts
    for (var index in baseFonts) {
        s.style.fontFamily = baseFonts[index];
        document.body.appendChild(s);
        defaultWidth[baseFonts[index]] = s.offsetWidth;
        defaultHeight[baseFonts[index]] = s.offsetHeight;
        document.body.removeChild(s);
    }

    function detect(font) {
        var detected = false;

        // Compare candidate font's width and height against base fonts
        for (var index in baseFonts) {
            s.style.fontFamily = font + ',' + baseFonts[index]; // Fallback to base font
            document.body.appendChild(s);
            var matched = (s.offsetWidth != defaultWidth[baseFonts[index]] || s.offsetHeight != defaultHeight[baseFonts[index]]);
            document.body.removeChild(s);
            detected = detected || matched;
        }

        return detected;
    }

    this.detect = detect;
};

仕組み:

このライブラリは、フォントごとに異なる文字の幅と高さの違いを分析します。候補フォントを 3 つの基本フォントと比較することで、ライブラリは候補フォントがブラウザで使用できるかどうかを判断できます。

以上がJavaScript はユーザー フォントの選択に利用可能なフォントをどのように検出できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。