rembourrage de texte lors de l'utilisation vw taille de police

Question

J'utilise vw pour faire un agrandissement de texte en fonction du navigateur de la page est ouverte po Cependant, le rembourrage est plus grand que prévu. Je veux que ce soit exactement dans le coin supérieur de ma page avec peu ou pas de rembourrage. (J'ai essayé padding:0px; sans résultat). Voici un exemple:

En HTML:

<heading>some text</heading> 

En CSS:

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

Answer 1

Pour obtenir le résultat que vous voulez, vous pouvez faire l'un des suivants:

1 - ligne d'utilisation -la taille.

<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 - Vous pouvez ajouter une marge négative à pirater autour d'elle.

<div>some text</div> 

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

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

Answer 2

Cela est probablement dû au fait que la plupart des polices (y compris les polices système) ne se prolongent pas complètement vers le haut et le bas de la zone de délimitation pour chaque glyphe. Cela signifie qu'une lettre majuscule ne touchera pas le haut d'un élément même si l'élément a une hauteur de 1em. Pour résoudre ce problème, vous pouvez expérimenter avec votre police et voir où les hauts et les bas de vos lettres tombent. Cela peut être différent pour chaque police et dépend également de la hauteur des ascendeurs. Souvent, les ascendeurs sont plus grands que la hauteur du chapeau.

Pour Times New Roman, qui suit fonctionne bien pour les bouchons:

<span>Foobar</span> 

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

La ligne de changement ici est la ligne de hauteur. Jouer avec cela devrait vous donner les résultats dont vous avez besoin. .70, par exemple, fixe encore un peu le "O".

Je recommande de faire la police beaucoup plus grande que nécessaire, en composant la hauteur de ligne, puis en la rétrécissant.

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>