Comment JavaScript peut-il détecter les polices disponibles pour la sélection des polices par l'utilisateur ?

Détection des polices prises en charge pour la personnalisation de l'utilisateur

Question :

Comment utiliser JavaScript pour obtenir le navigateur Une liste de toutes les polices qui peuvent être affichées pour fournir une fonctionnalité de sélection de police à l'utilisateur ?

Réponse :

Bibliothèque de détection de polices JavaScript de Lalit Patel : 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;
};

Comment ça marche :

Cette bibliothèque analyse les différences de largeur et de hauteur des caractères entre les différentes polices. L'apparence de chaque caractère varie selon les caractères. polices, ce qui donne des largeurs et des hauteurs uniques pour la même chaîne de test. En comparant une police candidate à trois polices de base, la bibliothèque peut déterminer si la police candidate est disponible dans le navigateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!