Wie Sie erkennen, welche der definierten schriftart verwendet wurde, die in einer web-Seite?

Question

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

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

Wie kann ich erkennen, welche der definierten Schriftarten verwendet und im browser des Benutzers?

Bearbeiten für Menschen, die sich Fragen, warum ich dies tun möchten: Die font-ich bin Erkennung enthält eine Glyphe, die nicht verfügbar sind in anderen Schriften, und wenn der Benutzer nicht über die Schrift will ich für einen link zu Fragen, die Benutzer zum download der schriftart, so dass Sie können verwenden Sie meine web-Anwendung, mit der richtigen schriftart.

Aktuell habe ich die Anzeige der download-link Schrift für alle Benutzer, ich möchte nur die Anzeige der dies für Menschen, die nicht die richtige schriftart installiert ist.

Answer 1

Ich habe es gesehen, in einer Art von iffy, aber ziemlich zuverlässig.Im Grunde, ein element festgelegt ist, um eine bestimmte schriftart verwenden und einen string auf das element.Wenn die schriftart für das element nicht vorhanden ist, nimmt es die schriftart des übergeordneten Elements.So, was Sie tun ist, Messen Sie die Breite des gerenderten string.Wenn es dem entspricht, was er erwartet für die gewünschte schriftart, die im Gegensatz zu der abgeleitete schriftart, es vorhanden ist.Dies funktioniert nicht für Schriftarten mit einheitlichem Zeichenabstand.

Hier, wo es herkam:Javascript/CSS Font Detector (ajaxian.com;12 Mar 2007)

Answer 2

Ich schrieb ein einfaches JavaScript-tool, das Sie verwenden können, um zu prüfen, ob eine schriftart installiert ist oder nicht.
Es verwendet einfache Technik und sollte korrekt sein, die meisten der Zeit.

jFont Checker auf github

Answer 3

@pat Eigentlich, Safari nicht geben die schriftart verwendet, Safari, anstatt immer wieder die erste Schrift im Stapel, unabhängig davon, ob es installiert ist, zumindest in meiner Erfahrung.

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

Vorausgesetzt, die Helvetica ist die installiert ist/verwendet, erhalten Sie:

• "meine gefälschte Schrift" in Safari (und ich glaube, anderen webkit-Browsern).
• "mein fake-font, helvetica, san-serif" in Gecko-Browsern und dem IE.
• "helvetica" in Opera 9, aber ich habe gelesen, dass Sie ändern diese in Opera 10 zu entsprechen Gecko.

Ich nahm einen pass auf dieses problem und erstellt Font Unstack, welche tests Sie jede schriftart in einem Stapel und gibt die zuerst installiert man nur.Es verwendet den trick, @MojoFilter erwähnt, aber gibt nur die ersten, wenn mehrere installiert sind.Obwohl es nicht leiden, aus Schwäche, @tlrobinson erwähnt (Windows ersetzt Arial für Helvetica leise und Bericht, Helvetica installiert ist), ansonsten funktioniert es gut.

Answer 4

Eine vereinfachte form ist:

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

Wenn Sie brauchen etwas mehr abschließen, überprüfen Sie diese aus.

Answer 5

Eine Technik, die funktioniert, ist an den berechneten Stil des Elements.Unterstützt wird diese im Opera und Firefox (und ich recon in safari, aber noch nicht getestet).IE (mindestens 7), bietet eine Methode, um Stil, aber es scheint das zu sein, was war, in das stylesheet, die nicht den berechneten Stil.Mehr details auf quirksmode: Get Styles

Hier ist eine einfache Funktion zu packen, die schriftart für ein element:

/**
 * 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 wieder helvetica wenn, dass ist installiert, wenn nicht, arial, und schließlich der name der system-Standard-sans-serif-schriftart.Beachten Sie, dass die Bestellung von fonts in der CSS-Deklaration ist von Bedeutung.

Eine interessante hack Sie könnten auch versuchen, erstellen viele versteckte Elemente mit vielen verschiedenen Schriftarten, um zu versuchen, um festzustellen, welche Schriftarten auf einem Computer installiert werden.Ich bin sicher, jemand könnte eine nette Schrift statistikerfassung Seite mit dieser Technik.

Answer 6

Eine andere Lösung wäre, um die schriftart zu installieren, die automatisch über @font-face das könnte negieren die Notwendigkeit für die Erkennung.

@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 nicht zu lösen alle Fragen des Urheberrechts, aber Sie können immer mit einer freeware schriftart oder sogar machen Sie Ihre eigene schriftart.Sie benötigen .eot & .ttf Dateien, die am besten zu funktionieren.

Answer 7

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

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

Diese Funktion wird genau das tun, was Sie wollen.Bei der Ausführung wird Es wieder die schriftart des Benutzers/Browsers.Hoffe das hilft.

Answer 8

Calibri ist eine schriftart, die im Besitz von Microsoft, und sollte nicht kostenlos verteilt werden.Auch, dass ein Benutzer zu laden Sie eine bestimmte schriftart nicht sehr Benutzer-freundliche.

Ich würde vorschlagen, den Kauf einer Lizenz für die Schrift und die Einbettung in Ihre Anwendung.

Answer 9

Ich bin mit Quelle.Sie müssen nur ziehen Sie die Quelle-Taste, um Ihre Lesezeichen-Leiste, klicken Sie auf es und dann klicken Sie auf einen bestimmten text auf der website.Es wird dann zeigen die schriftart des Textes.

https://fount.artequalswork.com/

Answer 10

Sie können der Nutzung dieser website :

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

Es tut genau das, was Sie wollen...

Answer 11

Sie können Adobe Blank in der schriftart-Familie nach der schriftart, die Sie sehen wollen, und dann alle Glyphen, die nicht in dieser Schrift nicht dargestellt werden.

z.B.:

font-family: Arial, 'Adobe Blank';

So weit ich bin mir bewusst, es gibt keine JS-Methode, um zu sagen, welche Symbole ein element gerendert werden, indem Sie die schriftart in der schriftart-stack für das element aus.

Dies wird durch die Tatsache erschwert, dass die Browser von Benutzer-Einstellungen für serif/sans-serif - /monospace-Schriftarten und Sie haben auch Ihre eigenen hard-coded fallback-Schriftarten, die Sie verwenden werden, wenn eine Glyphe ist nicht gefunden in jede der Schriftarten der schriftart-Stapel. Der browser kann machen einige Glyphen in einer schriftart, die nicht in die font-stack oder den browser des Benutzers, die Einstellung der schriftart. Chrome Dev-Tools, zeigen Ihnen jedes gerenderte Schrift für die Zeichen in dem markierten element.So auf Ihre Maschine, Sie können sehen, was es tut, aber es gibt keine Möglichkeit zu sagen, was geschieht auf dem Rechner des Nutzers.

Es ist auch möglich, dem system des Benutzers eine Rolle spielen können, wie z.B. Fenster Schriftart Substitution auf der glyph-Ebene.

so...

Für die Glyphen, die Sie interessiert sind in, Sie haben keine Möglichkeit zu wissen, ob Sie gerendert wird durch den Nutzer browser - /system-fallback, auch wenn Sie nicht die schriftart, die Sie angeben.

Wenn Sie testen möchten es in JS-Sie können dazu führen, dass einzelne Glyphen der schriftart-Familie einschließlich Adobe Leer und Messen Sie deren Breite um zu sehen, ob es null ist, ABER Sie hätte zu Durchlaufen Gründliche jeder Glyphe und jede schriftart, die Sie testen wollte, aber obwohl Sie wissen, können Sie die Schriften in einer elements-font-stack gibt es keine Möglichkeit zu wissen, welche Schriftarten im browser des Benutzers so konfiguriert ist, verwenden Sie dies für mindestens einige Ihrer Benutzer der Liste der Schriftarten, die Sie Durchlaufen unvollständig.(Es ist auch nicht zukunftsfähig, wenn neue Schriften heraus kommen und beginnen, immer verwendet.)