How Can JavaScript Detect Available Fonts for User Font Selection?

Detecting Supported Fonts for User Customization

Question:

How to use JavaScript to get the browser A list of all fonts that can be displayed to provide font selection functionality to the user?

Answer:

Lalit Patel's JavaScript font detection library: http://www.lalit.org/lab/javascript-css-font-detect

Code:

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

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.

The above is the detailed content of How Can JavaScript Detect Available Fonts for User Font Selection?. For more information, please follow other related articles on the PHP Chinese website!