it-swarm.com.de

liste aller Schriftarten, die ein Browser eines Benutzers anzeigen kann

Gibt es in Javascript eine Möglichkeit, die Namen aller Schriftarten (oder Schriftfamilien) zu ermitteln, die der Browser anzeigen kann? (Ich möchte dem Benutzer ein Dropdown mit einer Liste aller verfügbaren Schriftarten zur Verfügung stellen und dem Benutzer erlauben, eine Schriftart auszuwählen.) Ich würde es vorziehen, diese Liste nicht vorab festzukodieren oder sie aus dem Server. (Intuitiv scheint es, als sollte der Browser wissen, welche Schriften er hat und dies sollte irgendwie Javascript ausgesetzt sein.)

76
mattsh

Die JavaScript-Version ist etwas flockig. Es erhält Schriften, indem es bekannte Schriften durchläuft und testet. 

Der genaueste Weg (obwohl ein proprietäres Plugin verwendet werden muss) ist die Verwendung von Flash . Hier können Sie die Liste der Schriftarten abrufen, ohne sie anhand von Bemaßungen einzeln testen zu müssen.

Sie müssen sich entscheiden, ob Sie eine genaue Liste auf Kosten haben, die auf einigen Geräten nicht funktioniert (iDevices, Browser ohne Flash-Plugin usw.), oder eine Teilliste mit besserer Unterstützung nur durch JavaScript .

29
alex

Ja da ist! Ich bin so froh, dass Sie diese Frage gestellt haben, weil ich diese jetzt auch verwenden möchte.

+1 für die Frage und hier ist deine Antwort :)

http://www.lalit.org/lab/javascript-css-font-detect

Code from http://www.lalit.org/wordpress/wp-content/uploads/2008/05/fontdetect.js?ver=0.3

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

Zusammenfassung

Wie funktioniert es?

Dieser Code funktioniert nach dem einfachen Prinzip, dass jedes Zeichen angezeigt wird in verschiedenen Schriftarten unterschiedlich. Unterschiedliche Schriftarten werden also unterschiedlich sein Breite und Höhe für die gleiche Zeichenfolge derselben Schriftgröße.

60
Marko
<SCRIPT>
    function getFonts()
    {
        var nFontLen = dlgHelper.fonts.count;
        var rgFonts = new Array();
        for ( var i = 1; i < nFontLen + 1; i++ )
            rgFonts[i] = dlgHelper.fonts(i); 

        rgFonts.sort();
        for ( var j = 0; j < nFontLen; j++ )
            document.write( rgFonts[j] + "<BR>" );
    }
</SCRIPT>

<BODY onload="getFonts()">
<OBJECT id=dlgHelper CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px">
</OBJECT>
3
MPC

Bei meiner Suche danach habe ich auch Font.js gefunden, das ein Font-Objekt ähnlich wie Image hinzufügt. So können Sie überprüfen, ob eine Schriftart tatsächlich verwendet werden kann. Funktioniert auch bei installierten/Systemschriftarten. Ein Nachteil ist IE9 + nur, weil Object.defineProperty benötigt wird (andere Browser haben es), aber wenn Sie modernes Web betreiben, scheint dies eine noch bessere Option zu sein. (Ich werde leider mit der Antwort oben gehen müssen, aufgehoben und erstmal weitermachen. :))

2
Stoffe

Gehen Sie zu deviceinfo.me und klicken Sie auf die Schaltfläche zur Schrifterkennung.

0
Chris Chiasson

Ich habe oben zwei Methoden zu Lalit Patels Detector hinzugefügt:

  • addFont (family, stylesheetUrl, ruleString) -> erkennt, ob die Schriftfamilie 'family' vorhanden ist. Falls nicht, wird ein Stylesheet hinzugefügt, das die Schriftart mit entweder stylesheetUrl (falls vorhanden) oder anderweitig ruleString lädt
  • addFontsArr (arr) -> fügt ein Array von Schriftarten hinzu

Mit diesem können Sie:

fonts = [ 'Arial', 'Arial Black', { family: 'Lato', stylesheetUrl: 'https://fonts.googleapis.com/css?family=Lato'}, 'Leelawadee UI']
(new FontDetector()).addFontsArr(fonts);

code:

/**
 * 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');
 */
function FontDetector() {
    this.detect = detect;
    this.addFont = addFont;
    this.addFontsArr = addFontsArr;

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

    function addFont(family, stylesheetUrl, ruleString) {
        if (detect(family)) {
            //console.log('using internal font '+family);
            return true;
        }
        if (stylesheetUrl) {
            console.log('added stylesheet '+stylesheetUrl);
            var head = document.head, link = document.createElement('link');
            link.type = 'text/css';
            link.rel = 'stylesheet';
            link.href = stylesheetUrl;
            head.appendChild(link);
            return true;          
        }

        if (ruleString) {
            console.log('adding font rule:'+rule);
            var newStyle = document.createElement('style');
            newStyle.appendChild(document.createTextNode(rule));
            document.head.appendChild(newStyle);
            return true;
        }

        console.log('could not add font '+family);
    }

    function addFontsArr(arr) {
        arr.forEach(a => typeof a==='string' ? addFont(a) : addFont(a.family, a.stylesheetUrl, a.ruleString));
    }
};
0
kofifus

Möglicherweise kann dies auf eine ganz andere Art und Weise erfolgen, indem ein Spritesheet mit bekannten Schriftbildern für ein bestimmtes Zeichen verwendet wird und das Bild mit den Momentaufnahmen eines Canvas-Elements verglichen wird, auf denen das gleiche Zeichen gezeichnet ist, und der Browser meldet dieselbe Schrift. Der Vergleich kann mit etwas wie resemble.js durchgeführt werden. 

Dies ist langsamer, sollte aber auch erkennen, wenn der Browser lügt.

0
fzzylogic