javascript - Wie erkenne ich, welche der definierten Schriftarten auf einer Webseite verwendet wurde?

Translate

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 Leute, die sich fragen, warum ich das 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, damit er meine Webanwendung mit der richtigen Schriftart verwenden kann.

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.

This question and all comments follow the "Attribution Required."

Alle Antworten

Translate

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 dem übereinstimmt, was sie für die gewünschte Schriftart erwartet haben, im Gegensatz zur abgeleiteten Schriftart, ist es vorhanden. Dies funktioniert nicht für monospaced Schriftarten.

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

Quelle
Translate

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 Checkerauf Github

Quelle
Translate

@pat Eigentlich gibt Safari die verwendete Schriftart nicht an, Safari gibt stattdessen 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 erstelltSchriftart entstapeln, der 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.

Quelle
Translate

Eine vereinfachte Form ist:

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

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

Quelle
Translate

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:Holen Sie sich Stile

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.

Quelle
Translate

Es gibt eine einfache Lösung - einfach verwendenelement.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.

Quelle
Translate

Eine andere Lösung wäre, die Schriftart automatisch über zu installieren@font-faceDies könnte die Notwendigkeit der Erkennung zunichte machen.

@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 werden beides brauchen.eot&.ttfDateien am besten funktionieren.

Quelle
Translate

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.

Quelle
Translate

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/

Quelle
Translate

Sie können diese Website nutzen:

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

Es macht genau das, was Sie wollen ...

Quelle
Translate

Du kannst GebenAdobe Blankin der Schriftfamilie nach der Schriftart, die Sie sehen möchten, und dann werden alle 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 auch ihre eigenen fest codierten Fallback-Schriftarten, 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, wie zDas Fenster ersetzt die Schriftartauf der Glyphenebene.

damit...

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.ABERSie müssten jede Glyphe gründlich durchlaufen undjede Schriftart, die Sie testen wolltenObwohl 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.)

Quelle