Puis-je étirer le texte à l'aide de CSS ?

Question

Puis-je étirer le texte en CSS ? Je ne veux pas que la police soit plus grande, car cela la ferait apparaître plus grosse que le texte plus petit à côté. Je veux juste étirer le texte verticalement pour qu'il soit un peu déformé. Ce texte serait placé dans une division, et le texte normal à côté serait placé dans une autre division. Comment puis-je procéder ?

Answer 1

Oui, vous pouvez effectivement le faire avec CSS 2D Transforms. Cette fonction est prise en charge par presque tous les navigateurs modernes, y compris IE9+. Voici un exemple.

HTML

<p>I feel like <span class="stretch">stretching</span>.</p>

CSS

span.stretch {
    display:inline-block;
    -webkit-transform:scale(2,1); /* Safari and Chrome */
    -moz-transform:scale(2,1); /* Firefox */
    -ms-transform:scale(2,1); /* IE 9 */
    -o-transform:scale(2,1); /* Opera */
    transform:scale(2,1); /* W3C */
}

TIP : Vous devrez peut-être ajouter une marge à votre texte étiré pour éviter les collisions de texte.

Answer 2

Je vais répondre pour l'étirement horizontal du texte, puisque le vertical est la partie facile - il suffit d'utiliser "transform : scaleY()".

.stretched-text {
  letter-spacing: 2px;
  display: inline-block;
  font-size: 32px;
  transform: scaleY(0.5);
  transform-origin: 0 0;
  margin-bottom: -50%;
}
span {
  font-size: 16px;
  vertical-align: top;
}

<span class="stretched-text">this is some stretched text</span>
<span>and this is some random<br />triple line <br />not stretched text</span>

espacement des lettres ajoute juste de l'espace entre les lettres, n'étire rien, mais c'est plutôt relatif.

inline-block car les éléments en ligne sont trop restrictifs et le code ci-dessous ne fonctionnerait pas autrement.

Maintenant, la combinaison qui fait la différence

taille de la police pour obtenir la taille souhaitée - de cette façon, le texte aura vraiment la longueur qu'il est censé avoir et le texte qui le précède et celui qui le suit apparaîtront à côté de lui (scaleX est juste pour l'affichage, le navigateur voit toujours l'élément à sa taille d'origine lorsqu'il positionne d'autres éléments).

scaleY pour réduire la hauteur du texte, de manière à ce qu'il soit identique à celui qui se trouve à côté.

transform-origin pour que le texte soit mis à l'échelle à partir du haut de la ligne.

marge inférieure défini à une valeur négative, afin que la ligne suivante ne soit pas bien en dessous - de préférence en pourcentage, afin que nous ne changions pas la propriété line-height. alignement vertical défini en haut, pour empêcher le texte avant ou après de flotter à d'autres hauteurs (puisque le texte étiré a une taille réelle de 32px)

-- L'élément span simple possède une taille de police, uniquement à titre de référence.

La question demandait un moyen d'empêcher l'audace du texte causée par l'étirement et je n'en ai toujours pas donné un, MAIS l'option font-weight a plus de valeurs que la simple propriété normal et en gras .

Je sais, tu ne peux pas voir ça, mais si tu cherches le bon polices vous pouvez utiliser les autres valeurs.

Answer 3

Je reviens toujours à cette page lorsqu'un designer me propose une police de caractères. La solution acceptée fonctionne très bien, mais je rencontre fréquemment des problèmes avec les marges.

Je vous recommande d'utiliser la transformation sur la hauteur plutôt que sur la largeur si vous rencontrez des problèmes, cela m'a sauvé la vie dans mon projet actuel.

.font-stretch {
    display: inline-block;
    -webkit-transform: scale(1,.9);
    -moz-transform: scale(1,.9);
    -ms-transform: scale(1,.9);
    -o-transform: scale(1,.9);
    transform: scale(1,.9);
}

Answer 4

La fonction CSS font-stretch est désormais prise en charge par tous les principaux navigateurs (à l'exception d'iOS Safari et d'Opera Mini). Il n'est pas facile de trouver une famille de polices commune qui prend en charge l'expansion des polices, mais il est facile de trouver des polices qui prennent en charge la condensation, par exemple :

font-stretch: condense;
font-family: sans-serif, "Helvetica Neue", "Lucida Grande", Arial;

Answer 5

Eh bien, vous pouvez l'étirer horizontalement avec font-stretch mais il n'existe pas de propriété similaire pour l'étirement vertical.