Wie Sie wissen, ist em eine relative Schriftgröße, wobei ein em gleich der Höhe des Buchstabens "M" in der Standardschriftgröße ist. Ein Vorteil bei der Verwendung ist, dass Sie die Größe des Textes ändern können.
Aber wie kann ich die Standardschriftgröße der aktuellen Umgebung (in Pixel) mit JavaScript oder JQuery erhalten?
Grüße,
Ein Trick, den ich in der Vergangenheit gesehen / benutzt habe, ist, etwas Text zu rendern (sagen wir 50 beliebige Zeichen oder Ms) und dann die Größe des gerenderten Containers zu messen und die Höhe und Breite von a zu berechnen einzelnes Zeichen. Ist das was du willst? Sie können das Rendering im Hintergrund ausführen, damit der Benutzer es nicht sehen kann.
Ich glaube, das M-Prinzip ist ein Mythos. Zumindest die folgende Dokumentation von Ссылка beweist, dass Berechnungen, die auf dem M-Prinzip basieren, übermäßig kompliziert und kompliziert sind unnötig.
Die 'em' Einheit ist gleich der berechneten Wert der 'font-size' Eigenschaft von das Element, auf dem es verwendet wird. Das Ausnahme ist, wenn 'em' in der auftritt Wert der Eigenschaft 'font-size' selbst, in diesem Fall bezieht es sich auf die Schriftgröße des übergeordneten Elements. Es kann für vertikal oder horizontal verwendet werden Messung. (Diese Einheit ist auch manchmal die Quad-Breite genannt typografische Texte.)
Aus dieser Dokumentation folgt Folgendes:
Ohne vorherige Vergrößerung ist 1em genau gleich der Pixelschriftgröße.
Da die Ahnenvergrößerung mit ems und percent auf genau definierte Weise funktioniert, berechnet eine einfache Schleife exakte Schriftgrößen, unter der Annahme: nein C.S.S; und bei einigen Vorfahren wird die Schriftgröße in absoluten Einheiten angegeben.
Da ems die Breite misst, können Sie immer die exakte Pixelschriftgröße berechnen, indem Sie ein div erstellen, das 1000 ems lang ist und die Eigenschaft client-Width durch 1000 teilt. Ich erinnere mich, dass ems auf das nächste Tausendstel abgeschnitten sind. Sie benötigen also 1000 ems, um eine fehlerhafte Kürzung des Pixelergebnisses zu vermeiden.
Sie können wahrscheinlich eine Schriftart erstellen, bei der das M-Prinzip fehlschlägt, da em auf dem Attribut font-size basiert und nicht auf der tatsächlichen Schriftart. Angenommen, Sie haben eine seltsame Schriftart, in der M 1/3 der Größe der anderen Zeichen ist und Sie eine Schriftgröße von 10 Pixel haben. Ich glaube, dass die Schriftgröße eine Garantie für die maximale Zeichenhöhe ist und das M nicht 10 Pixel und alle anderen Zeichen 30 Pixel groß ist.
Verwenden von jQuery (vorausgesetzt, Sie möchten die Schriftgröße eines bestimmten Elements):
var originalFontSize = $('#your_element_id_here').css('font-size') ;
Wenn Sie sowohl Prototype als auch jQuery verwenden, sollten Sie anstelle des Dollarzeichens das Präfix jQuery verwenden:
%Vor%Dies wird den Wert als eine Zeichenfolge wie folgt zurückgeben: 16px.
Ich denke, das ist, was Sie suchen:
%Vor%* Wenn body anderswo im Code eine andere fontSize-Deklaration hat (vielleicht in einigen CSS), gibt die Funktion diesen Wert zurück. Zum Beispiel:
%Vor%Der obige Wert gibt einen fontSize-Wert von 20px zurück.
Komplett getestet und funktioniert für mich (Chrom 22.0.1229.94 m und Firefox 13.01).Auch wenn es so aussieht, als wäre es eine gute Idee, die Standardschriftgröße zu bekommen - wenn Sie das Layout Ihrer Seiten und so einstellen, ist es wahrscheinlich sicherer, den Benutzer einfach damit umgehen zu lassen.
Wenn ihre Schriftgröße größer ist - weil sie blind sind und umgekehrt. Ich würde empfehlen, die Standardeinstellungen festzulegen und eine Auflösung / Größe zu empfehlen. Es sei denn, Ihre App hängt davon ab - lassen Sie den Benutzer damit umgehen.
Es kann mit dieser Codezeile gemacht werden:
%Vor%window.getComputedStyle(document.body) - um alle Stile für body getPropertyValue('font-size') - um einen Zeichenfolgenwert der Schriftgröße zu erhalten, Beispiel: (16px)
match(/\d+/)[0]) - um nur einen Zahlenteil zu erhalten, Beispiel: (16) - string
Number(...) - um den Zahlenteil in eine Zahl zu konvertieren, Beispiel: (16) - Nummer
Tags und Links javascript jquery css fonts font-size