How to Enumerate Fonts Available to a Web Browser\'s Rendering Engine using JavaScript?

Enumerating Fonts Available to a Web Browser's Rendering Engine

In web development, it is often desirable to provide users with a customizable browsing experience. This can include allowing them to select a font of their choice from a list of fonts that the browser can render. To facilitate this, it is necessary to have a way to programmatically obtain a list of all available fonts.

One approach to solving this problem is to hardcode a list of fonts or retrieve it from a server. However, this approach can be cumbersome and may not cater to situations where the browser has additional fonts installed by the user.

Fortunately, there exists a more elegant and dynamic solution using JavaScript. The following snippet utilizes a technique known as font detection:

<code class="js">/**
 * JavaScript code to detect available availability of a
 * particular font in a browser using JavaScript and CSS.
 *
 * Author : Lalit Patel
 * Website: http://www.lalit.org/lab/javascript-css-font-detect/
 * License: Apache Software License 2.0
 *          http://www.apache.org/licenses/LICENSE-2.0
 * Version: 0.15 (21 Sep 2009)
 *          Changed comparision font to default from sans-default-default,
 *          as in FF3.0 font of child element didn't fallback
 *          to parent element if the font is missing.
 * Version: 0.2 (04 Mar 2012)
 *          Comparing font against all the 3 generic font families ie,
 *          'monospace', 'sans-serif' and 'sans'. If it doesn't match all 3
 *          then that font is 100% not available in the system
 * Version: 0.3 (24 Mar 2012)
 *          Replaced sans with serif in the list of baseFonts
 */

/**
 * Usage: d = new Detector();
 *        d.detect('font name');
 */
var Detector = function() {
    // a font will be compared against all the three default fonts.
    // and if it doesn't match all 3 then that font is not available.
    var baseFonts = ['monospace', 'sans-serif', 'serif'];

    //we use m or w because these two characters take up the maximum width.
    // And we use a LLi so that the same matching fonts can get separated
    var testString = "mmmmmmmmmmlli";

    //we test using 72px font size, we may use any size. I guess larger the better.
    var testSize = '72px';

    var h = document.getElementsByTagName("body")[0];

    // create a SPAN in the document to get the width of the text we use to test
    var s = document.createElement("span");
    s.style.fontSize = testSize;
    s.innerHTML = testString;
    var defaultWidth = {};
    var defaultHeight = {};
    for (var index in baseFonts) {
        //get the default width for the three base fonts
        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);
    }

    function detect(font) {
        var detected = false;
        for (var index in baseFonts) {
            s.style.fontFamily = font + ',' + baseFonts[index]; // name of the font along with the base font for fallback.
            h.appendChild(s);
            var matched = (s.offsetWidth != defaultWidth[baseFonts[index]] || s.offsetHeight != defaultHeight[baseFonts[index]]);
            h.removeChild(s);
            detected = detected || matched;
        }
        return detected;
    }

    this.detect = detect;
};</code>

This code creates a 'Detector' object with a 'detect' method. The 'detect' method takes a font name as an argument and returns a boolean indicating whether the font is available for rendering by the browser.

The code works by creating a element and setting its font-family to the specified font. This element is then appended to the document body. The width and height of the element are then measured and compared against the default values for the three 'monospace', 'sans-serif', and 'serif' fonts. If the measured values are different from the default values, it indicates that the specified font is available.

To enumerate all available fonts, simply iterate over an array of font names and call the 'detect' method for each font. The result will be a list of all fonts that the browser can render.

The above is the detailed content of How to Enumerate Fonts Available to a Web Browser\'s Rendering Engine using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!