Auffüllen von Text bei der Verwendung von vw Schriftgröße

Question

Ich verwende vw, um einen Text zu vergrößern je nach dem Browser, in dem die Seite geöffnet ist. Die Auffüllung ist jedoch größer als erwartet. Ich möchte, dass es genau in der oberen Ecke meiner Seite ist, mit wenig oder gar keiner Auffüllung. (Ich versuchte padding:0px; ohne Ergebnis). Hier ein Beispiel:

In HTML:

<heading>some text</heading> 

In CSS:

heading{ 
    font-size:5vw; 
    padding:0px; 
    margin:0px; 
} 

Answer 1

Um das gewünschte Ergebnis Sie eine der folgenden Möglichkeiten:

1 - Einsatz Linie -Höhe.

<div>some text<br/>line 2</div> 

div { 
    font-size: 5vmax; 
    padding: 0px; 
    line-height: 0.75em; 
    background:lightgray 
} 

body { 
    margin: 0; 
} 

https://jsfiddle.net/7sqdnvyh/2/

2 - können Sie negativen Marge um es zu hacken hinzufügen.

<div>some text</div> 

div { 
    font-size:5vw; 
    margin-top:-15px; 
} 

https://jsfiddle.net/7sqdnvyh/1/

Answer 2

dies wahrscheinlich durch die Tatsache verursacht wird, dass die meisten Schriftarten (einschließlich System fonts) nicht vollständig an den oberen und unteren Rand des Begrenzungskastens für jede Glyphe erstrecken. Dies bedeutet, dass ein Großbuchstabe nicht die Spitze eines Elements berührt, selbst wenn das Element eine Höhe von 1em hat.

Um dies zu lösen, können Sie mit Ihrer Schrift experimentieren und sehen, wo die Ober- und Unterseite Ihrer Buchstaben fallen. Dies kann für jede Schriftart unterschiedlich sein und hängt auch davon ab, wie hoch die Oberlängen sind. Oft sind die Oberlängen größer als die Kappenhöhe.

Für Times New Roman, arbeitet der folgenden gut für Kappen:

<span>Foobar</span> 

span { 
    background: #ddd; 
    display: inline-block; 
    line-height: .70em; 
    vertical-align: text-top; 
} 

Die Linie hier zu ändern, ist die Zeilenhöhe. Um damit herumspielen sollte Ihnen die Ergebnisse geben, die Sie brauchen. .70 zum Beispiel, schneidet immer noch das "O" ein bisschen.

Ich empfehle, die Schriftart viel größer als benötigt, wählen Sie in der Zeilenhöhe und dann verkleinern Sie es wieder zurück.

span { 
 
    background: #ddd; 
 
    display: inline-block; 
 
    line-height: .70em; 
 
    vertical-align: text-top; 
 
} 
 

 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
    font: serif; 
 
    font-size: 20vw; 
 
}

<span>FOOBAR</span>