Enumeración de fuentes disponibles para el motor de renderizado de un navegador web

En el desarrollo web, a menudo es deseable proporcionar a los usuarios una experiencia de navegación personalizable. Esto puede incluir permitirles seleccionar una fuente de su elección de una lista de fuentes que el navegador puede representar. Para facilitar esto, es necesario tener una manera de obtener mediante programación una lista de todas las fuentes disponibles.

Un enfoque para resolver este problema es codificar una lista de fuentes o recuperarla de un servidor. Sin embargo, este enfoque puede ser engorroso y puede no atender situaciones en las que el navegador tiene fuentes adicionales instaladas por el usuario.

Afortunadamente, existe una solución más elegante y dinámica que utiliza JavaScript. El siguiente fragmento utiliza una técnica conocida como detección de fuentes:

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

Este código crea un objeto 'Detector' con un método de 'detección'. El método 'detect' toma el nombre de una fuente como argumento y devuelve un valor booleano que indica si la fuente está disponible para que el navegador la represente.

El código funciona creando un elemento y configurando su familia de fuentes a la fuente especificada. Luego, este elemento se agrega al cuerpo del documento. Luego, el ancho y el alto del elemento se miden y se comparan con los valores predeterminados para las tres fuentes 'monoespaciada', 'sans-serif' y 'serif'. Si los valores medidos son diferentes de los valores predeterminados, indica que la fuente especificada está disponible.

Para enumerar todas las fuentes disponibles, simplemente repita una serie de nombres de fuentes y llame al método 'detección' para cada fuente . El resultado será una lista de todas las fuentes que el navegador puede representar.