Ermitteln, welche Schriftart in einer Webseite verwendet wurde

  • Angenommen, ich habe die folgende CSS-Regel auf meiner Seite:

     body {
        font-family: Calibri, Trebuchet MS, Helvetica, sans-serif;
    }
     

    Wie kann ich herausfinden, welche der definierten Schriftarten im Browser des Benutzers verwendet wurde?

    Für Leute, die sich fragen, warum ich das möchte Gehen Sie dazu folgendermaßen vor: Die von mir erkannte Schriftart enthält Glyphen, die in anderen Schriftarten nicht verfügbar sind. Wenn der Benutzer nicht über die Schriftart verfügt, möchte ich einen Link anzeigen, der den Benutzer auffordert, diese Schriftart herunterzuladen, damit er mein Web verwenden kann Anwendung mit der richtigen Schriftart.

    Derzeit zeige ich den Download-Schriftlink für alle Benutzer an. Ich möchte diesen Link nur für Personen anzeigen, die nicht die richtige Schriftart installiert haben.

    16 March 2016
    Pat
11 answers
  • Ich habe gesehen, dass es auf eine Art irreführend, aber ziemlich zuverlässig gemacht wurde. Grundsätzlich wird für ein Element eine bestimmte Schriftart verwendet, und für dieses Element wird eine Zeichenfolge festgelegt. Wenn die für das Element festgelegte Schriftart nicht vorhanden ist, wird die Schriftart des übergeordneten Elements übernommen. Sie messen also die Breite der gerenderten Zeichenfolge. Wenn es mit dem übereinstimmt, was sie für die gewünschte Schriftart im Gegensatz zu der abgeleiteten Schriftart erwartet haben, ist sie vorhanden.

    Hier ist es, von wo es kam: /ajaxian.com/archives/javascriptcss-font-detector "rel =" noreferrer "> Javascript / CSS Font Detector (ajaxian.com; 12 Mar 2007)

    26 January 2012
    hakreuser225626
  • Ich habe ein einfaches JavaScript-Tool geschrieben, mit dem Sie prüfen können, ob eine Schriftart installiert ist oder nicht.
    Es verwendet eine einfache Technik und sollte meistens korrekt sein.

    jFont Checker auf github

    27 January 2015
    Derek 朕會功夫
  • Es gibt eine einfache Lösung

     function getUserBrowsersFont() 
    {
        var browserHeader = document.getElementById('header');
        return browserHeader.style.font;
    }
     

    diese Funktion wird genau das tun, was Sie möchten. Bei der Ausführung wird der Benutzerbrowsertyp für Benutzer / Besucher zurückgegeben. Hoffe, das wird helfen

    07 February 2013
    CloudyMarbleLuciusAgarthy
  • @pat Eigentlich gibt Safari die verwendete Schriftart nicht zurück, stattdessen gibt Safari immer die erste Schriftart im Stapel zurück, unabhängig davon, ob sie installiert ist, zumindest nach meiner Erfahrung.

     font-family: "my fake font", helvetica, san-serif;
     

    Angenommen, Helvetica wird installiert / verwendet, erhalten Sie:

    • "meine falsche Schriftart" in Safari (und ich glaube, andere Webkit-Browser).
    • "meine falsche Schriftart, Helvetica, San-Serif" in Gecko-Browsern und IE.
    • "Helvetica" in Opera 9, obwohl ich gelesen habe, dass sie dies in Opera 10 ändern, um mit Gecko übereinzustimmen.

    Ich habe dieses Problem bestanden und Font Unstack erstellt, das jede Schriftart in einem Stapel testet und nur die zuerst installierte zurückgibt. Es verwendet den von @MojoFilter erwähnten Trick, gibt jedoch nur den ersten Trick zurück, wenn mehrere installiert sind. Es leidet zwar an der Schwäche, die @tlrobinson erwähnt (Windows ersetzt Helvetica durch Arial und meldet, dass Helvetica installiert ist), ansonsten funktioniert es gut.

    FontUnstack

    03 July 2016
    Gintokiphiloye
  • Eine vereinfachte Form lautet:

     function getFont() {
        return document.getElementById('header').style.font;
    }
     

    Wenn Sie etwas Vollständigeres benötigen, aktivieren Sie hier aus.

    15 January 2013
    Danilo Valente
  • Eine funktionierende Technik besteht darin, den berechneten Stil des Elements zu betrachten. Dies wird in Opera und Firefox unterstützt (und ich bin auf Safari, aber nicht getestet). IE (mindestens 7) bietet eine Methode zum Abrufen eines Stils, aber es scheint das zu sein, was sich im Stylesheet befand, nicht der berechnete Stil. Weitere Informationen zum quirksmode: Styles abrufen

    Hier ist eine einfache Funktion, um die in einem Element verwendete Schriftart zu erfassen:

     /**
     * Get the font used for a given element
     * @argument {HTMLElement} the element to check font for
     * @returns {string} The name of the used font or null if font could not be detected
     */
    function getFontForElement(ele) {
        if (ele.currentStyle) { // sort of, but not really, works in IE
            return ele.currentStyle["fontFamily"];
        } else if (document.defaultView) { // works in Opera and FF
            return document.defaultView.getComputedStyle(ele,null).getPropertyValue("font-family");
        } else {
            return null;
        }
    }
     

    Wenn die CSS-Regel dafür gilt war:

     #fonttester {
        font-family: sans-serif, arial, helvetica;
    }
     

    Dann sollte Helvetica zurückgegeben werden, falls dies installiert ist, falls nicht, arial und zuletzt Name der Standard-Sans-Serif-Schriftart des Systems. Beachten Sie, dass die Reihenfolge der Zeichensätze in Ihrer CSS-Deklaration von Bedeutung ist.

    Ein interessanter Hack, den Sie auch versuchen könnten, besteht darin, viele verborgene Elemente mit vielen verschiedenen Zeichensätzen zu erstellen, um herauszufinden, welche davon verwendet werden Schriftarten werden auf einer Maschine installiert. Ich bin mir sicher, dass jemand mit dieser Technik eine nette Seite zum Erstellen von Schriftstatistiken erstellen kann.

    28 January 2013
    runeh
  • Eine andere Lösung wäre die automatische Installation der Schriftart über @font-face, wodurch die Erkennung entfällt.

     @font-face { 
    font-family: "Calibri"; 
    src: url("http://www.yourwebsite.com/fonts/Calibri.eot"); 
    src: local("Calibri"), url("http://www.yourwebsite.com/fonts/Calibri.ttf") format("truetype");
    }
     

    Natürlich würde es keine Urheberrechtsprobleme lösen. Sie können jedoch immer eine Freeware-Schriftart verwenden oder sogar eine eigene Schriftart erstellen. Sie benötigen sowohl .eot & amp; .ttf -Dateien funktionieren am besten.

    07 February 2013
    CloudyMarbleLuciusAgarthy
  • Calibri ist eine Schrift von Microsoft und sollte nicht kostenlos verteilt werden. Das Herunterladen eines bestimmten Zeichensatzes durch einen Benutzer ist nicht sehr benutzerfreundlich.

    Ich würde vorschlagen, eine Lizenz für die Schriftart zu erwerben und sie in Ihre Anwendung einzubetten.

    07 February 2013
    CloudyMarbleLuciusAgarthy
  • Sie können diese Website verwenden:

    http://website-font-analyzer.com/

    Es macht genau das, was Sie wollen ...

    23 June 2017
    hardkodedachinda99
  • Ich verwende Fount. Sie müssen lediglich die Schaltfläche "Fount" in Ihre Lesezeichenleiste ziehen, darauf klicken und dann auf einen bestimmten Text auf der Website klicken. Dann wird die Schriftart dieses Texts angezeigt.

    https://fount.artequalswork.com/

    13 March 2017
    Woppi