Kann JavaScript alle Schriftarten erkennen, die der Browser eines Benutzers anzeigen kann?

Jede Schriftart auflisten, die der Browser eines Benutzers anzeigen kann

Kann JavaScript im Browser anzeigbare Schriftarten abrufen?

Ja, es ist möglich, mithilfe von JavaScript eine Liste aller vom Browser des Benutzers unterstützten Schriftarten zu erhalten. Dies ermöglicht die Erstellung eines Dropdown-Menüs mit verfügbaren Schriftarten für die Benutzerauswahl.

Implementierung der Schriftartenerkennung

Siehe http://www.lalit.org/lab/javascript -css-font-detect für eine effiziente JavaScript-Lösung:

Code Snippet:

var Detector = function() {
    // baseFonts
    var baseFonts = ['monospace', 'sans-serif', 'serif'];

    // testString
    var testString = "mmmmmmmmmmlli";

    // testSize
    var testSize = '72px';

    // helper functions
    var h = document.getElementsByTagName("body")[0];
    var s = document.createElement("span");
    s.style.fontSize = testSize;
    s.innerHTML = testString;

    // default measurements
    var defaultWidth = {};
    var defaultHeight = {};
    for (var index in baseFonts) {
        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);
    }

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

Funktionsprinzip

Dieser Code nutzt das einzigartige Erscheinungsbild von Zeichen in verschiedenen Schriftarten. Durch den Vergleich der Breite und Höhe des in einer bestimmten Schriftart gerenderten Texts mit denen in Basisschriftarten wird ermittelt, ob die Zielschriftart unterstützt wird.

Das obige ist der detaillierte Inhalt vonKann JavaScript alle Schriftarten erkennen, die der Browser eines Benutzers anzeigen kann?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!