Wie kann JavaScript verfügbare Schriftarten für die Benutzerschriftauswahl erkennen?

Erkennung unterstützter Schriftarten für die Benutzeranpassung

Frage:

Wie verwende ich JavaScript, um Folgendes zu erhalten Der Browser Eine Liste aller Schriftarten, die angezeigt werden können, um dem Benutzer Funktionen zur Schriftartenauswahl zu bieten?

Antwort:

Lalit Patels JavaScript-Schrifterkennungsbibliothek: 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;
};

Wie es funktioniert:

Diese Bibliothek analysiert die Unterschiede in der Zeichenbreite und -höhe zwischen verschiedenen Schriftarten. Das Erscheinungsbild jedes Zeichens variiert Schriftarten, was zu eindeutigen Breiten und Höhen für dieselbe Testzeichenfolge führt. Durch den Vergleich einer Kandidatenschriftart mit drei Basisschriftarten kann die Bibliothek feststellen, ob die Kandidatenschriftart im Browser verfügbar ist.

Das obige ist der detaillierte Inhalt vonWie kann JavaScript verfügbare Schriftarten für die Benutzerschriftauswahl erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!