Wie bekomme ich aktuelle Textgröße in CSS

Question

Ich tring, um ein CSS zu schreiben, dass für alle Zeichenfolge, die ich auflegen kann, diese Zeichenfolgen über 3px erhöhen. Ich weiß nicht, wie kann ich das tun, ich denke, etwas in der Art:

.increaseSize { 
getSize()+3px; 
} 

Jeder kann mir helfen?

Answer 1

Ich würde einen anderen und viel einfacheren Ansatz suchen.

p.myText { 
 
    font-size: 16px; 
 
} 
 

 
.increaseSize { 
 
    font-size: 1.5em 
 
}

<p class="myText">This is some standard text and <span class="increaseSize">this is a bigger font size text</span></p>

Dies würde jede .increaseSize Element Schriftgröße 50% größer als seine Eltern machen.

Sie können calc() verwenden, aber vielleicht browser compatibility ist ein Problem. Dies ist eine sicherere Lösung.

Hilft Ihnen das?

Answer 2

Sie können es wie im folgenden Beispiel verwenden:

div { 
 
    font-size: 1em; 
 
} 
 
span.increase { 
 
    font-size: calc(100% + 3px); 
 
}

<div> 
 
    Hello <span class="increase">World</span> 
 
</div>

Mit der % Einheit Sie die aktuelle Schriftgröße des Elements erhalten. Jetzt können Sie calc (browser compatibility) verwenden, um die 3px zu der aktuellen font-size hinzuzufügen.

Sie sollten die font-size nicht selbst für responsive Web-Design berechnen. Sie können/sollten relative Einheiten wie em, rem oder % verwenden, um responsive font-size zu erreichen.

Answer 3

Wie

von W3C empfohlen

Set Schriftgröße Mit Em Benutzer den Text (im Browser-Menü), verwenden viele Entwickler em Pixel statt, um die Größe zu ermöglichen.

Die em-Größeneinheit wird vom W3C empfohlen.

1em entspricht der aktuellen Schriftgröße. Die Standardtextgröße in Browsern ist> 16px. Die Standardgröße von 1em ist also 16px.

Die Größe kann von Pixeln em mit dieser Formel berechnet werden: Pixel/16 = em

Hier sind einige Beispiele

h1 { 
font-size: 2.5em; /* 40px/16=2.5em */ 
} 

h2 { 
font-size: 1.875em; /* 30px/16=1.875em */ 
} 

p { 
font-size: 0.875em; /* 14px/16=0.875em */ 
}