Comment puis-je répertorier par programmation les polices disponibles dans un navigateur Web à l'aide de JavaScript ?

Liste des polices disponibles dans un navigateur Web utilisant JavaScript

Dans une application Web, proposer aux utilisateurs une liste déroulante des polices disponibles améliore l'expérience utilisateur en leur permettant de personnaliser le apparence du texte. Cette personnalisation nécessite l'obtention d'une liste de polices que le navigateur peut afficher.

Heureusement, il existe une solution intuitive à ce problème. JavaScript fournit un moyen simple de répertorier toutes les polices auxquelles un navigateur a accès. Il s'agit d'une étape cruciale pour permettre aux utilisateurs de sélectionner leur police préférée et d'adapter la page Web à leur goût.

Solution

Un développeur JavaScript talentueux a créé une solution complète qui permet aux développeurs de détecter les polices disponibles. polices dans un navigateur. Cette méthode utilise une technique de comparaison de la largeur et de la hauteur rendues de caractères spécifiques. En recoupant l'écart par rapport aux polices par défaut, le script détermine avec précision la disponibilité d'une police particulière spécifiée par l'utilisateur.

Le code de cette solution est disponible sur GitHub.

Mise en œuvre

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

En utilisant cette méthode, les développeurs peuvent facilement créer des interfaces utilisateur permettant une personnalisation transparente des polices. Offrir aux utilisateurs la possibilité de sélectionner leurs polices préférées dans une liste complète améliore l'expérience utilisateur globale et la satisfaction à l'égard des applications Web.

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!