Festzustellen, welche Schriftart wurde in einer Webseite verwendet

stimmen
110

Angenommen, ich die folgenden CSS-Regel in meiner Seite habe:

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

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

Edit für Menschen fragen sich, warum ich dies tun wollen: Die Schrift Ich Erkennung enthält Glyphe ist , die nicht verfügbar sind in anderen Schriften und wenn der Benutzer nicht die Schrift hat Ich möchte einen Link zur Anzeige der Benutzer auffordert , diese Schrift zum Download , so dass sie kann meine Web - Anwendung mit der richtigen Schriftart verwenden.

Derzeit bin ich die Anzeige den Download Schrift Link für alle Benutzer, möchte ich dies für die Menschen nur angezeigt werden, die nicht installiert ist die richtige Schriftart haben.

Veröffentlicht am 03/08/2008 um 22:42
quelle vom benutzer
In anderen Sprachen...                            


11 antworten

stimmen
59

Ich habe es in einer Art iffy, aber ziemlich zuverlässigen Art und Weise getan gesehen. Grundsätzlich ist ein Element gesetzt eine bestimmte Schriftart und eine Zeichenfolge zu verwenden, wird auf dieses Element. Wenn das font-Set für das Element nicht vorhanden ist, nimmt es die Schriftart des übergeordneten Elements. Also, was sie tun, ist die Breite der gerenderten Saite messen. Wenn es passt, was sie für die gewünschte Schriftart erwartet wie der abgeleiteten Schrift gegenüber, ist es vorhanden.

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

Beantwortet am 03/08/2008 um 22:51
quelle vom benutzer

stimmen
27

Ich schrieb ein einfaches JavaScript - Tool , das Sie es verwenden können , um zu überprüfen , ob eine Schriftart installiert ist oder nicht.
Es verwendet einfache Technik und sollte die meiste Zeit richtig sein.

jFont Checker auf Github

Beantwortet am 21/05/2011 um 18:58
quelle vom benutzer

stimmen
7

@ Pat Eigentlich Safari nicht der Schrift geben verwendet, Safari statt liefert immer die erste Schriftart in dem Stapel unabhängig davon, ob es installiert ist, zumindest in meiner Erfahrung.

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

Unter der Annahme, Helvetica ist derjenige installiert / verwendet wird, erhalten Sie:

  • „Meine gefälschte font“ in Safari (und ich glaube, anderen Webkit-Browser).
  • "Mein gefälschte Schriftart, Helvetica, san-serif" in Gecko-Browser und Internet Explorer.
  • „Helvetica“ in Opera 9, obwohl ich gelesen, dass sie dies in Opera ändern 10 Gecko anzupassen.

Ich habe einen Pass auf dieses Problem und erstellt Font Unstack, die jede Schriftart in einem Stapel testet und gibt die erste nur installiert. Es verwendet den Trick, die @MojoFilter erwähnt, aber nur gibt die ersten, wenn mehrere installiert sind. Obwohl es von der Schwäche leidet, dass @tlrobinson erwähnt (Windows ersetzen wird Arial für Helvetica geräuschlos und berichtet, dass Helvetica installiert ist), es ansonsten gut funktioniert.

FontUnstack

Beantwortet am 20/05/2009 um 11:57
quelle vom benutzer

stimmen
6

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 wollen. Bei der Ausführung Es wird den Benutzer / Besucher Browser Schrifttyp zurück. Hoffe, dass dies helfen wird,

Beantwortet am 29/11/2011 um 09:40
quelle vom benutzer

stimmen
6

Eine vereinfachte Form hat:

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

Wenn Sie etwas vollständigere benötigen, überprüfen diese aus.

Beantwortet am 23/10/2011 um 14:32
quelle vom benutzer

stimmen
6

Eine Technik , die funktioniert , ist auf dem berechneten Stil des Elements zu suchen. Dies wird in Opera und Firefox unterstützt (und ich recon in Safari, aber noch nicht getestet). IE (7 zumindest), liefert ein Verfahren , einen Stil zu bekommen, aber es scheint , was im Stylesheet war zu sein, nicht der berechnete Stil. Weitere Details zu Quirksmode: Get Styles

Hier ist eine einfache Funktion, um die Schriftart in einem Element verwendet greifen:

/**
 * 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 für diese war:

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

Dann sollte es zurückgeben Helvetica, wenn das installiert ist, wenn nicht, arial, und schließlich der Name der Standard-System serifenlosen Schrift. Beachten Sie, dass die Reihenfolge der Schriftart in Ihrer CSS-Deklaration von Bedeutung ist.

Ein interessanter Hack Sie auch versuchen könnte, ist viele versteckte Elemente mit vielen verschiedenen Schriftarten zu erstellen, welche Schriften installiert sind, auf einer Maschine, um zu versuchen zu erkennen. Ich bin sicher, dass jemand eine nette Schrift Statistikerfassung Seite mit dieser Technik machen könnte.

Beantwortet am 25/08/2008 um 23:16
quelle vom benutzer

stimmen
5

Eine andere Lösung wäre, um die Schriftart installieren automatisch über @font-facedie möglicherweise die Notwendigkeit für den Nachweis negieren.

@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äre es keine Copyright - Probleme nicht lösen, aber immer eine Freeware - Schriftart verwenden , könnten Sie oder sogar Ihre eigene Schriftart machen. Sie werden beide brauchen .eotund .ttfDateien am besten funktionieren.

Beantwortet am 05/01/2012 um 12:19
quelle vom benutzer

stimmen
2

Calibri ist eine Schrift von Microsoft, und sollte nicht kostenlos verteilt werden. Auch dass ein Benutzer eine bestimmte Schriftart zum Download ist nicht sehr benutzerfreundlich.

Ich würde vorschlagen, eine Lizenz für die Schriftart kaufen und es in Ihre Anwendung integrieren.

Beantwortet am 14/11/2012 um 19:56
quelle vom benutzer

stimmen
1

Sie können diese Website nutzen:

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

Es tut genau, was Sie wollen ...

Beantwortet am 11/04/2015 um 20:41
quelle vom benutzer

stimmen
0

Sie können setzen Adobe Blank nach der Schriftart , die Sie sehen wollen , in der font-Familie, und dann keine Glyphen in dieser Schrift nicht gemacht werden.

z.B:

font-family: Arial, 'Adobe Blank';

Soweit ich es bewusst bin, ist kein JS-Methode zu erklären, welche Glyphen in einem Element durch die Schriftart in der Schriftart Stapel für das Element gerendert werden.

Dies wird durch die Tatsache erschwert , dass Browser Benutzereinstellungen für serif / sans-serif / Monospace - Schriftarten haben , und sie haben auch ihre eigenen hartcodierte Fall-Back - Schriften , die sie verwenden, wenn eine Glyphe in keiner der Schriften in eine gefunden wird font - Stack. So kann Browser einige Glyphen in einer Schrift machen , die nicht in dem Schriftenstapel oder den Browser Schriftart - Einstellung des Benutzers. Chrome Dev - Tools zeigen Ihnen jede gerendert Schriftart für die Glyphen in dem ausgewählten Elemente . Also auf Ihrem Computer können Sie sehen , was es tut, aber es gibt keine Möglichkeit zu sagen , was auf dem Computer eines Benutzers geschieht.

Es ist auch möglich , das System des Benutzers in dem eine Rolle spielen kann , wie zB Fenster Font Substitution funktioniert auf der Glyphe Ebene.

damit...

Für die Glyphen Sie interessiert sind, haben Sie keine Möglichkeit zu wissen, ob sie durch den Browser / Systemrückfall des Benutzers wiedergegeben werden, auch wenn sie nicht über die Schriftart, die Sie angeben.

Wenn Sie es in JS testen möchten , können Sie einzelne Glyphen machen mit einem font-Familie , einschließlich Adobe Blank und ihre Breite zu messen , um zu sehen , ob es Null ist, ABER würden Sie gründlich jede Glyphe laufen müssen und jede Schriftart , die Sie testen wollte , aber obwohl Sie die Schriften in einem Elemente Schriftart Stapel wissen kann , gibt es keine Möglichkeit zu wissen , was der Browser des Benutzers Schriften ist so konfiguriert, zu verwenden , um zumindest einige Ihrer Benutzer die Liste der Schriftarten , die Sie durch laufen wird unvollständig sein. (Es ist auch nicht zukunftssicher , wenn neue Schriftarten kommen und beginnen Gewöhnung.)

Beantwortet am 30/11/2017 um 10:58
quelle vom benutzer

stimmen
0

Ich verwende Fount. Sie müssen nur die Fount Schaltfläche, um Ihre Lesezeichenleiste ziehen, klicken Sie darauf und dann auf einen bestimmten Text auf der Website. Es wird dann zeigt die Schriftart des Textes.

https://fount.artequalswork.com/

Beantwortet am 13/03/2017 um 04:31
quelle vom benutzer

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more