CSS: 100% Schriftgröße - 100% von was?

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:

1. Ist diese Standardgröße für jede Browserversion immer gleich oder variieren sie zwischen den Versionen?
2. 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?
3. 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.

Die Standardeinstellung des Browsers ist etwa 16pt für Firefox. Sie können dies überprüfen, indem Sie die Firefox-Optionen aufrufen, auf die Registerkarte Inhalt klicken und die Schriftgröße überprüfen. Sie können dies auch für andere Browser tun.

Ich persönlich möchte die Standardschriftgröße meiner Websites steuern. In einer CSS-Datei, die auf jeder Seite enthalten ist, setze ich den BODY-Standard wie folgt:

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px
}

Jetzt erbt die Schriftgröße aller meiner HTML-Tags eine Schriftgröße von 14px.

Angenommen, ich möchte, dass alle Divs eine Schriftgröße haben, die 10% größer als der Körper ist. Ich mache einfach Folgendes:

div {
    font-size: 110%
}

Jetzt macht jeder Browser, der meine Seiten anzeigt, alle Divs automatisch 10% größer als die des Körpers, was ungefähr 15,4 Pixel betragen sollte.

Wenn ich möchte, dass die Schriftgröße aller Divs 10% kleiner ist, mache ich:

div {
    font-size: 90%
}

Dadurch haben alle Divs eine Schriftgröße von 12,6 Pixel.

Da die Schriftgröße vererbt wird, sollten Sie auch wissen, dass jedes verschachtelte Div die Schriftgröße um 10% verringert.

<div>Outer DIV.
    <div>Inner DIV</div>
</div>

Das innere Div hat eine Schriftgröße von 11,34 Pixel (90% von 12,6 Pixel), was möglicherweise nicht beabsichtigt war.

Dies kann bei der Erklärung hilfreich sein: http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-percentage

Mein Verständnis ist, dass, wenn die Schriftart wie folgt eingestellt ist

body {
  font-size: 100%;
}

Der Browser rendert die Schriftart gemäß den Benutzereinstellungen für diesen Browser.

Die Spezifikation besagt, dass% gerendert wird

relativ zur Schriftgröße des übergeordneten Elements

http://www.w3.org/TR/CSS1/#font-size

In diesem Fall meine ich damit, worauf der Browser eingestellt ist.

Ein Prozentsatz des Werts der font-sizeEigenschaft 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 bodyElement des Elements ist das Stammelement, dh das htmlElement. 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 inputElement 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 festlegen

Eingabe {Schriftgröße: 100%}

Für das bodyElement wird die logisch redundante Einstellung font-size: 100%ziemlich häufig verwendet, da angenommen wird, dass sie gegen einige Browserfehler hilft (in Browsern, die wahrscheinlich jetzt ihre Bedeutung verloren haben).

Es ist relativ zur Standardschriftgröße des Browsers, es sei denn, Sie überschreiben es mit einem Wert in pt oder px.

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% Georgiaund font-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 wird normal(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.

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 einem embasierten 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.

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.

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.

Gemäß ALLEN SPEZIFIKATIONEN AUS DEM JAHR 1996font-size beziehen sich Prozentwerte auf die (berechnete) Schriftgröße des übergeordneten Elements .

<style>
div {
  font-size: 16px;
}
span {
  font-size: 75%;
}
</style>
<div><span>this font size is 12px!</span></div>

So einfach ist das.

Was ist, wenn das diveine relative Schriftgröße wie ems 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:

html {
  font-size: 62.5%; /* 62.5% of what? */
}

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:

• CSS 1 spec (1996)
• CSS 2.1 spec (2011)
• CSS Fonts Level 3 spec (2013)
• Entwurf des CSS Fonts Level 3-Editors (2017)