Schriftgröße nicht gleich in Pixeln und em

Question

Ich habe eine webpage von mir gemacht, in dem ich "Frontend Developer" Text zweimal auf dem Laptop Bild, so dass ich die Schriftgröße in Pixeln und em vergleichen kann.

Für den oberen „Frontend Entwickler“ text habe ich font-size: 2.875em während für die untere „Frontend Entwickler“ text setzen, ich habe font-size: 46px setzen

Ich frage mich, warum der Text sowohl Schriftgrößen für sind nicht suchen ähnlich? Obwohl 46px = 2.875em (Schriftgröße)

Der CSS-Code für beide des Textes sind:

.frontend-background-image p:nth-child(1) { 
    font-size: 2.875em; 
    color: white; 
    text-align: center; 
    padding-top: 8%; 
    padding-left: 5%; 
} 

.frontend-background-image p:nth-child(2) { 
    color: white; 
    text-align: center; 
    padding-left: 5%; 
    font-size: 46px; 
} 

Answer 1

em ist eine relative Einheit, das heißt, wenn Sie 2.875em ay, du meinst 2.875 mal was auch immer die Schriftgröße wäre am Anfang gewesen. 46px ist 2,875em ... wenn Ihre Grundgröße 16px ist. Die Tatsache, dass der andere Text in einer anderen Größe angezeigt wird, bedeutet, dass Ihre Basisgröße etwas anderes sein muss.

Wenn Sie Elemente in Dev-Tools überprüfen, können Sie auf der Registerkarte "computed" sehen, welche Schriftgröße tatsächlich dargestellt wird. In Ihrem Fall wird diese Zeile bei ca. 40px ausgegeben.

Sie können die Basislinie ändern, die em relativ ist, indem Sie eine Schriftgröße für das übergeordnete Element festlegen. In Ihrem Fall zum Beispiel, wenn Sie hinzufügen:

.frontend-background-image { font-size: 16px; }

es wird die Mathematik machen gleich aus und werden diese beiden Textzeilen die gleiche Größe.