JavaScript 如何偵測可用字型以供使用者選擇字型？

Detecting Supported Fonts for User Customization

Question:

Question:

Question:

Question:

/**
 * 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;
};

Question:

Answer:

Lalit Patel's JavaScript font detection library: http://www.lalit.org/lab/javascript-css-font-detectCode:How it Works:This library analyzes character width and height differences between different fonts. Each character's appearance varies across fonts, resulting in unique widths and heights for the same test string. By comparing a candidate font against three base fonts, the library can determine whether the candidate font is available in the browser.

以上是JavaScript 如何偵測可用字型以供使用者選擇字型？的詳細內容。更多資訊請關注PHP中文網其他相關文章！