JSFiddle - React, Tailwind, and code Playground

Font Detection parallelization

by _sir

JavaScript

function getFontList() {
    var familyList = ["monospace", "sans-serif", "serif"];
    var testString = "mmmmmmmmmmlli";
    var fontSize = "72px";
    var body = document.getElementsByTagName("body")[0];
    if (!body) {
        return "undefined";
    }
    var testSpan = document.createElement("span");
    testSpan.style.fontSize = fontSize;
    testSpan.innerHTML = testString;
    var widths = {}, heights = {};
    for (var family in familyList) {
        testSpan.style.fontFamily = familyList[family];
        body.appendChild(testSpan);
        widths[familyList[family]] = testSpan.offsetWidth;
        heights[familyList[family]] = testSpan.offsetHeight;
        body.removeChild(testSpan);
    }
    var exists = function (fontName) {
        var fontExists = false;
        for (var family in familyList) {
            testSpan.style.fontFamily = fontName + "," + familyList[family];
            body.appendChild(testSpan);
            var isDifferent = (testSpan.offsetWidth !== widths[familyList[family]] || testSpan.offsetHeight !== heights[familyList[family]]);
            body.removeChild(testSpan);
            fontExists = fontExists || isDifferent;
        }
        return fontExists;
    };
    var fontList = ["Abadi MT Condensed Light", "Academy Engraved LET", "ADOBE CASLON PRO", "Adobe Garamond", "ADOBE GARAMOND PRO", "Agency FB", "Aharoni", "Albertus Extra Bold", "Albertus Medium", "Algerian", "Amazone BT", "American Typewriter", "American Typewriter Condensed", "AmerType Md BT", "Andale Mono", "Andalus", "Angsana New", "AngsanaUPC", "Antique Olive", "Aparajita", "Apple Chancery", "Apple Color Emoji", "Apple SD Gothic Neo", "Arabic Typesetting", "ARCHER", "Arial", "Arial Black", "Arial Hebrew", "Arial MT", "Arial Narrow", "Arial Rounded MT Bold", "Arial Unicode MS", "ARNO PRO", "Arrus BT", "Aurora Cn BT", "AvantGarde Bk BT", "AvantGarde Md BT", "AVENIR", "Ayuthaya", "Bandy", "Bangla Sangam MN", "Bank Gothic", "BankGothic Md BT", "Baskerville",...