JavaScript 如何检测可用字体以供用户选择字体？

Detecting Supported Fonts for User Customization

Question:

如何利用 JavaScript 获取浏览器可显示的所有字体列表，以便为用户提供字体选择功能？

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.

以上是JavaScript 如何检测可用字体以供用户选择字体？的详细内容。更多信息请关注PHP中文网其他相关文章！