Puis-je étirer du texte en CSS? Je ne veux pas que la police soit plus grande, car cela la rend plus audacieuse que le texte plus petit à côté. Je veux juste étirer le texte verticalement pour qu'il soit un peu déformé. Ce serait dans un div, puis le texte normal à côté serait dans un autre div. Comment puis-je faire ceci?

Oui, vous pouvez en fait avec les transformations CSS 2D. Ceci est pris en charge dans 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 */
}

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

Je vais répondre pour l'étirement horizontal du texte, car la verticale est la partie la plus facile - utilisez simplement "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>

L'espacement des lettres ajoute simplement un espace entre les lettres, n'étire rien, mais c'est un peu 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

font-size pour obtenir la taille que nous voulons - de cette façon, le texte aura vraiment la longueur qu'il est censé être et le texte avant et après apparaîtra à côté (scaleX est juste pour montrer, le navigateur voit toujours l'élément à sa taille d'origine lors du positionnement d'autres éléments).

scaleY pour réduire la hauteur du texte, afin qu'il soit identique au texte à côté.

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

margin-bottom défini sur une valeur négative, de sorte que la ligne suivante ne soit pas bien en dessous - de préférence en pourcentage, de sorte que nous ne modifierons pas la propriété line-height. vertical-align mis en haut, pour empêcher le texte avant ou après de flotter vers d'autres hauteurs (puisque le texte étiré a une taille réelle de 32px)

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

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

Je sais, vous ne pouvez tout simplement pas voir cela, mais si vous recherchez les polices appropriées , vous pouvez utiliser plus de valeurs.

Techniquement, non. Mais ce que vous pouvez faire, c'est utiliser une taille de police aussi grande que vous le souhaiteriez pour la police étirée, puis la condenser horizontalement avec font-stretch.

La seule façon dont je peux penser pour des textes courts comme "MENU" est de mettre chaque lettre dans un intervalle et de les justifier dans un conteneur par la suite. Comme ça:

<div class="menu-burger">
  <span></span>
  <span></span>
  <span></span>
  <div>
    <span>M</span>
    <span>E</span>
    <span>N</span>
    <span>U</span>
  </div>
</div>

Et puis le CSS:

.menu-burger {
  width: 50px;
  height: 50px;
  padding: 5px;
}

...

.menu-burger > div {
  display: flex;
  justify-content: space-between;
}

CSS font-stretch est désormais pris en charge dans tous les principaux navigateurs (sauf iOS Safari et Opera Mini). Il n'est pas facile de trouver une famille de polices commune prenant en charge les polices extensibles, mais il est facile de trouver des polices prenant en charge la condensation, par exemple:

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

Je reviens toujours sur cette page quand un concepteur étire une police sur moi. La solution acceptée fonctionne très bien, mais je rencontre fréquemment des problèmes de marges.

Je recommanderais d'utiliser la transformation sur la hauteur au lieu de la largeur si vous rencontrez des problèmes, c'était une vie plus sûre pour moi 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);
}