Es gibt viele Artikel und Fragen zu prozentualen oder anderen Schriftarten. Ich kann jedoch nicht herausfinden, WAS die Referenz des Prozentwerts sein soll. Ich verstehe, dass dies "in allen Browsern die gleiche Größe" ist. Ich habe das auch gelesen, zum Beispiel:
Prozent (%): Die prozentuale Einheit ähnelt der „em“ -Einheit, abgesehen von einigen grundlegenden Unterschieden. In erster Linie entspricht die aktuelle Schriftgröße 100% (dh 12pt = 100%). Während Sie die Prozenteinheit verwenden, bleibt Ihr Text für mobile Geräte und für die Barrierefreiheit vollständig skalierbar.
Quelle: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
Wenn Sie jedoch "dh 12 pt = 100%" sagen, bedeutet dies, dass Sie zuerst definieren müssen font-size: 12pt
. Funktioniert das so? Sie definieren zuerst eine Größe in einem absoluten Maß und bezeichnen diese dann als "100%"? Das macht nicht viel Sinn, da viele Beispiele sagen, dass es nützlich ist, Folgendes zu sagen:
body {
font-size: 100%;
}
Also , indem Sie diese, WAS ist die Schriftgröße relativ zu? Ich stelle fest, dass die Größe, die ich auf meinem Bildschirm sehe, für jede Schriftart unterschiedlich ist. Arial sieht zum Beispiel viel größer aus als Times New Roman. Wenn ich dies nur tun würde, Körpergröße = 100%, würde das bedeuten, dass es in allen Browsern gleich ist? Oder nur wenn ich zuerst einen absoluten Wert definiere?
UPDATE, SAMSTAG, 23. JULI
Ich komme dorthin, aber bitte ertrage es mit mir.
Der% -Wert bezieht sich also auf die Standardschriftgröße des Browsers, wenn ich das richtig verstehe. Nun, das ist schön, gibt mir aber noch einige andere Fragen:
- Ist diese Standardgröße für jede Browserversion immer gleich oder variieren sie zwischen den Versionen?
- ICH ! Ich habe die Einstellungen für Google Chrome gefunden (siehe Bild unten) (noch nie zuvor gesehen!), und ich sehe die Standardeinstellungen "Serife", "Serifenlos" und "Monospace". Aber wie interpretiere ich das für andere Schriftarten? Angenommen, ich definiere
font: 100% Georgia;
, welche Größe der Browser annehmen wird. Wird die Standardgröße für Serifen nachgeschlagen oder hat die Schriftart "Georgia" eine Standardgröße für den Browser? - Auf mehreren Websites lese ich Dinge wie
Sizing text and line-height in ems, with a percentage specified on the body [..], was shown to provide **accurate, resizable text across all browsers** in common use today
. Aber von dem, was ich jetzt lerne, glaube ich, dass Sie tatsächlich wählen sollten, ob Sie entweder die Größe des Textes ändern möchten (mit% oder em, wie in diesem Zitat empfohlen) oder ob Sie "genaue, konsistente Schriftgrößen über alle Browser hinweg" haben (mit px oder pt als Basis). Ist das richtig?
Google-Einstellungen:
Dies ist , wie ich denke , Dinge könnten wie folgt aussehen , wenn Sie die Größe in absoluten Werten nicht definieren.
font-size
mit relativen Einheiten wieem
,rem
oder%
. Mitpx
wird die Standardschriftgröße des Browsers überschrieben! Viele Benutzer geben eine benutzerdefinierte Schriftgröße an, um das Lesen von Text zu erleichtern.Mein Verständnis ist, dass, wenn die Schriftart wie folgt eingestellt ist
Der Browser rendert die Schriftart gemäß den Benutzereinstellungen für diesen Browser.
Die Spezifikation besagt, dass% gerendert wird
http://www.w3.org/TR/CSS1/#font-size
In diesem Fall meine ich damit, worauf der Browser eingestellt ist.
quelle
body
isthtml
. sobody { font-size: 100%; }
werden 100% der seinhtml
‚s Schriftgröße, nicht die Standard - Browser. Normalerweise sind diese jedoch ein und dasselbe, sodass Sie effektiv richtig liegen. Aber manchmal sehen Sie einehtml { font-size: ??? }
Regel.Ein Prozentsatz des Werts der
font-size
Eigenschaft ist relativ zur Schriftgröße des übergeordneten Elements . CSS 2.1 sagt dies dunkel und verwirrend (bezogen auf „geerbte Schriftgröße“), aber CSS3 Text sagt es sehr deutlich.Das übergeordnete
body
Element des Elements ist das Stammelement, dh dashtml
Element. Sofern nicht in einem Stylesheet festgelegt, ist die Schriftgröße des Stammelements implementierungsabhängig. Dies hängt normalerweise von den Benutzereinstellungen ab.Das Festlegen
font-size: 100%
ist in vielen Fällen sinnlos, da ein Element die Schriftgröße seines übergeordneten Elements erbt (was zum gleichen Ergebnis führt), wenn kein Stylesheet seine eigene Schriftgröße festlegt. Es kann jedoch nützlich sein, Einstellungen in anderen Stylesheets (einschließlich Standard-Stylesheets des Browsers) zu überschreiben.Beispielsweise hat ein
input
Element normalerweise eine Einstellung im Browser-Stylesheet, sodass die Standardschriftgröße kleiner als die des Kopiertextes ist. Wenn Sie die Schriftgröße gleich einstellen möchten, können Sie festlegenEingabe {Schriftgröße: 100%}
Für das
body
Element wird die logisch redundante Einstellungfont-size: 100%
ziemlich häufig verwendet, da angenommen wird, dass sie gegen einige Browserfehler hilft (in Browsern, die wahrscheinlich jetzt ihre Bedeutung verloren haben).quelle
font-size:100%
die einen Zweck erfüllen könnte, ist der Quirks-Modus, in dem Schriftgrößen nicht an Tabellen vererbt werden. Bei diesem Stil erhalten Tabellen die übergeordnete Schriftgröße. Natürlich benutzt niemand mehr bei Verstand den Quirks-Modus ...Es ist relativ zur Standardschriftgröße des Browsers, es sei denn, Sie überschreiben es mit einem Wert in pt oder px.
quelle
body
, kein willkürlich verschachteltes Element, so dass die Antwort mit einem kleinen Sternchen richtig ist :)Es tut mir leid, wenn ich zu spät zur Party komme, aber in Ihrer Bearbeitung machen Sie eine Bemerkung darüber
font: 100% Georgia
, auf die die anderen Antworten nicht geantwortet haben.Es gibt einen Unterschied zwischen
font: 100% Georgia
undfont-size:100%; font-family:'Georgia'
. Wenn das alles wäre, wäre die Schriftgröße bedeutungslos. Es werden jedoch auch viele Eigenschaften auf ihre Standardwerte gesetzt: Die Linienhöhe wirdnormal
(oder um 1,2), ebenso für den Stil (nicht kursiv) und die Gewichtung (nicht fett).Das ist alles. Die anderen Antworten erwähnten bereits alles andere, was es zu erwähnen gab.
quelle
Wie Sie überzeugend gezeigt haben,
font-size: 100%;
wird das nicht in allen Browsern gleich gerendert. Sie werden jedoch Ihre Schriftart in Ihrer CSS-Datei festlegen, sodass dies in allen Browsern gleich ist (oder ein Fallback ist).Ich glaube,
font-size: 100%;
dass es sehr nützlich sein kann, wenn man es mit einemem
basierten Design kombiniert . Wie dieser Artikel zeigt, wird dadurch eine sehr flexible Website erstellt.Wann ist das sinnvoll? Wenn sich Ihre Website an die Wünsche der Besucher anpassen muss. Nehmen wir zum Beispiel einen älteren Mann, der seine Standardschriftgröße auf 24 Pixel festlegt. Oder jemand mit einem kleinen Bildschirm mit einer großen Auflösung, die seine Standardschriftgröße erhöht, weil er sonst schielen muss. Die meisten Websites würden kaputt gehen, aber em-basierte Websites sind in der Lage, mit diesen Situationen umzugehen.
quelle
Relativ zu der für diese Schriftart definierten Standardgröße.
Wenn jemand Ihre Seite in einem Webbrowser öffnet, wird eine Standardschriftart und -größe verwendet.
quelle
Nach meinem Verständnis hilft es Ihrem Inhalt, sich an unterschiedliche Werte der Schriftfamilie und der Schriftgröße anzupassen. Dadurch wird Ihr Inhalt skalierbar. In Bezug auf das Problem der Vererbung der Schriftgröße können wir jederzeit überschreiben, indem wir eine bestimmte Schriftgröße für das Element angeben.
quelle
Gemäß ALLEN SPEZIFIKATIONEN AUS DEM JAHR 1996
font-size
beziehen sich Prozentwerte auf die (berechnete) Schriftgröße des übergeordneten Elements .So einfach ist das.
Was ist, wenn das
div
eine relative Schriftgröße wieem
s oder noch schlimmer einen anderen Prozentsatz deklariert ? Siehe oben „berechnet“ . Unabhängig von der absoluten Einheit, in die die relative Einheit umgerechnet wird.Die einzige Frage, die noch offen ist, ist, was passiert, wenn Sie einen Prozentwert für das Stammelement verwenden, das kein übergeordnetes Element hat:
In diesem Fall lesen Sie das „Duplikat“ dieser Frage. TLDR: Prozentangaben im Stammelement beziehen sich auf die Standardschriftgröße des Browsers, die je nach Benutzer unterschiedlich sein kann.
Verweise:
quelle