Aufzählen von Schriftarten, die für die Rendering-Engine eines Webbrowsers verfügbar sind

Bei der Webentwicklung ist es oft wünschenswert, Benutzern ein anpassbares Browsing-Erlebnis zu bieten. Dazu kann gehören, dass sie aus einer Liste von Schriftarten, die der Browser rendern kann, eine Schriftart ihrer Wahl auswählen können. Um dies zu erleichtern, ist eine Möglichkeit erforderlich, programmgesteuert eine Liste aller verfügbaren Schriftarten abzurufen.

Ein Ansatz zur Lösung dieses Problems besteht darin, eine Liste von Schriftarten fest zu codieren oder von einem Server abzurufen. Dieser Ansatz kann jedoch umständlich sein und eignet sich möglicherweise nicht für Situationen, in denen der Browser vom Benutzer zusätzliche Schriftarten installiert hat.

Glücklicherweise gibt es eine elegantere und dynamischere Lösung mit JavaScript. Das folgende Snippet nutzt eine Technik namens Schriftartenerkennung:

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

Dieser Code erstellt ein „Detector“-Objekt mit einer „detect“-Methode. Die Methode „detect“ verwendet einen Schriftartnamen als Argument und gibt einen booleschen Wert zurück, der angibt, ob die Schriftart für die Darstellung durch den Browser verfügbar ist.

Der Code erstellt ein -Element und legt seine Schriftfamilie fest zur angegebenen Schriftart. Dieses Element wird dann an den Dokumentkörper angehängt. Anschließend werden Breite und Höhe des Elements gemessen und mit den Standardwerten für die drei Schriftarten „Monospace“, „Sans-Serif“ und „Serif“ verglichen. Wenn die gemessenen Werte von den Standardwerten abweichen, bedeutet dies, dass die angegebene Schriftart verfügbar ist.

Um alle verfügbaren Schriftarten aufzuzählen, iterieren Sie einfach über ein Array von Schriftartennamen und rufen Sie die Methode „Erkennen“ für jede Schriftart auf . Das Ergebnis ist eine Liste aller Schriftarten, die der Browser darstellen kann.