Wie erkenne ich, welche der definierten Schriftarten auf 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 feststellen, welche der definierten Schriftarten im Browser des Benutzers verwendet wurde?

Bearbeiten für Personen, die sich fragen, warum ich dies tun möchte: 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, in dem der Benutzer aufgefordert wird, diese Schriftart herunterzuladen kann meine Webanwendung mit der richtigen Schriftart verwenden.

Derzeit wird der Link zum Herunterladen von Schriftarten für alle Benutzer angezeigt. Ich möchte diesen Link nur für Personen anzeigen, auf denen nicht die richtige Schriftart installiert ist.

Ich habe es auf eine Art zweifelhafte, aber ziemlich zuverlässige Weise gesehen. 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 verwendet. Sie messen also die Breite der gerenderten Zeichenfolge. Wenn es mit den Erwartungen für die gewünschte Schriftart übereinstimmt und nicht mit der abgeleiteten Schriftart, ist es vorhanden. Dies funktioniert nicht für monospaced Schriftarten.

Hier ist, woher es kam: Javascript / CSS Font Detector (ajaxian.com; 12. März 2007)

Ich habe ein einfaches JavaScript-Tool geschrieben, mit dem Sie überprüfen können, ob eine Schriftart installiert ist oder nicht.
Es verwendet eine einfache Technik und sollte die meiste Zeit korrekt sein.

jFont Checker auf Github

@pat Eigentlich gibt Safari nicht die verwendete Schriftart an, sondern Safari gibt 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 ist die installierte / verwendete, erhalten Sie:

• "meine gefälschte Schriftart" in Safari (und ich glaube, andere Webkit-Browser).
• "Meine gefälschte 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 Gecko zu entsprechen.

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

Eine Technik, die funktioniert, besteht darin, den berechneten Stil des Elements zu betrachten. Dies wird in Opera und Firefox unterstützt (und ich rekonstruiere auf Safari, habe es aber nicht getestet). IE (mindestens 7) bietet eine Methode zum Abrufen eines Stils, aber es scheint alles zu sein, was im Stylesheet enthalten war, nicht der berechnete Stil. Weitere Details zum Quirksmode: Get Styles

Hier ist eine einfache Funktion zum Abrufen der in einem Element verwendeten Schriftart:

/**
 * 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 war:

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

Dann sollte helvetica zurückgegeben werden, wenn dies installiert ist, wenn nicht, arial und schließlich der Name der serienmäßigen Standard-Sans-Serif-Schriftart. Beachten Sie, dass die Reihenfolge der Schriftarten in Ihrer CSS-Deklaration von Bedeutung ist.

Ein interessanter Hack, den Sie auch versuchen könnten, besteht darin, viele versteckte Elemente mit vielen verschiedenen Schriftarten zu erstellen, um festzustellen, welche Schriftarten auf einem Computer installiert sind. Ich bin sicher, jemand könnte mit dieser Technik eine raffinierte Seite zum Sammeln von Schriftstatistiken erstellen.

Eine vereinfachte Form ist:

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

Wenn Sie etwas vollständigeres benötigen, überprüfen Sie dies .

Es gibt eine einfache Lösung - verwenden Sie einfach element.style.font:

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

Diese Funktion macht genau das, was Sie wollen. Bei der Ausführung wird der Schrifttyp des Benutzers / Browsers zurückgegeben. Hoffe das wird helfen.

Eine andere Lösung wäre, die Schriftart automatisch zu installieren, @font-facewodurch die Notwendigkeit einer Erkennung zunichte gemacht werden könnte.

@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, aber Sie könnten immer eine Freeware-Schriftart verwenden oder sogar Ihre eigene Schriftart erstellen. Sie benötigen beide .eot& .ttfDateien, um am besten zu funktionieren.

Calibri ist eine Schriftart von Microsoft und sollte nicht kostenlos verteilt werden. Außerdem ist es nicht sehr benutzerfreundlich, wenn ein Benutzer eine bestimmte Schriftart herunterladen muss.

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

Ich benutze Fount. Sie müssen nur die Schaltfläche "Fount" in Ihre Lesezeichenleiste ziehen, darauf klicken und dann auf einen bestimmten Text auf der Website klicken. Daraufhin wird die Schriftart dieses Textes angezeigt.

https://fount.artequalswork.com/

Sie können diese Website nutzen:

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

Es macht genau das, was Sie wollen ...

Sie können Adobe Blank nach der gewünschten Schriftart in die Schriftfamilie einfügen. Anschließend werden Glyphen, die nicht in dieser Schriftart enthalten sind, nicht gerendert.

z.B:

font-family: Arial, 'Adobe Blank';

Soweit mir bekannt ist, gibt es keine JS-Methode, um festzustellen, welche Glyphen in einem Element von welcher Schriftart im Schriftstapel für dieses Element gerendert werden.

Dies wird durch die Tatsache erschwert, dass Browser Benutzereinstellungen für Serifen- / Sans-Serif- / Monospace-Schriftarten haben und sie auch ihre eigenen fest codierten Fallback-Schriftarten haben, die sie verwenden, wenn in keiner der Schriftarten in a eine Glyphe gefunden wird Schriftstapel. Daher kann der Browser einige Glyphen in einer Schriftart rendern, die sich nicht im Schriftstapel oder in der Browser-Schriftarteneinstellung des Benutzers befindet. Chrome Dev Tools zeigt Ihnen jede gerenderte Schriftart für die Glyphen im ausgewählten Element . Auf Ihrem Computer können Sie also sehen, was es tut, aber es gibt keine Möglichkeit zu sagen, was auf dem Computer eines Benutzers passiert.

Es ist auch möglich, dass das System des Benutzers eine Rolle dabei spielt, da z. B. das Fenster die Schriftsetzung auf Glyphenebene durchführt.

so...

Bei den Glyphen, an denen Sie interessiert sind, können Sie nicht wissen, ob sie vom Browser- / System-Fallback des Benutzers gerendert werden, selbst wenn sie nicht die von Ihnen angegebene Schriftart haben.

Wenn Sie es in JS testen möchten, können Sie einzelne Glyphen mit einer Schriftfamilie einschließlich Adobe Blank rendern und deren Breite messen, um festzustellen, ob sie Null ist. ABER Sie müssen jede Glyphe und jede Schriftart, die Sie testen möchten, gründlich durchlaufen . Obwohl Sie die Schriftarten in einem Element-Schriftstapel kennen, können Sie nicht wissen, für welche Schriftarten der Browser des Benutzers konfiguriert ist, sodass zumindest für einige Ihrer Benutzer die Liste der Schriftarten, die Sie durchlaufen, unvollständig ist. (Es ist auch nicht zukunftssicher, wenn neue Schriftarten herauskommen und verwendet werden.)