Comment énumérer les polices disponibles pour le moteur de rendu d'un navigateur Web à l'aide de JavaScript ?

Énumération des polices disponibles pour le moteur de rendu d'un navigateur Web

Dans le développement Web, il est souvent souhaitable de fournir aux utilisateurs une expérience de navigation personnalisable. Cela peut inclure de leur permettre de sélectionner une police de leur choix dans une liste de polices que le navigateur peut restituer. Pour faciliter cela, il est nécessaire de disposer d'un moyen d'obtenir par programme une liste de toutes les polices disponibles.

Une approche pour résoudre ce problème consiste à coder en dur une liste de polices ou à la récupérer à partir d'un serveur. Cependant, cette approche peut être lourde et ne pas répondre aux situations dans lesquelles le navigateur a des polices supplémentaires installées par l'utilisateur.

Heureusement, il existe une solution plus élégante et dynamique utilisant JavaScript. L'extrait suivant utilise une technique connue sous le nom de détection de police :

<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 = &quot;mmmmmmmmmmlli&quot;;

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

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

    // create a SPAN in the document to get the width of the text we use to test
    var s = document.createElement(&quot;span&quot;);
    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>

Ce code crée un objet « Détecteur » avec une méthode « détecter ». La méthode 'detect' prend un nom de police comme argument et renvoie un booléen indiquant si la police est disponible pour le rendu par le navigateur.

Le code fonctionne en créant un élément et en définissant sa famille de polices sur la police spécifiée. Cet élément est ensuite ajouté au corps du document. La largeur et la hauteur de l'élément sont ensuite mesurées et comparées aux valeurs par défaut des trois polices « monospace », « sans-serif » et « serif ». Si les valeurs mesurées sont différentes des valeurs par défaut, cela indique que la police spécifiée est disponible.

Pour énumérer toutes les polices disponibles, parcourez simplement un tableau de noms de police et appelez la méthode « détecter » pour chaque police. . Le résultat sera une liste de toutes les polices que le navigateur peut restituer.

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!