Czy mogę rozciągnąć tekst w CSS? Nie chcę, aby czcionka była większa, ponieważ sprawia to, że wydaje się być grubsza niż mniejszy tekst obok niej. Chcę tylko rozciągnąć tekst w pionie, aby był trochę zdeformowany. Byłby w jednym div, a normalny tekst obok niego byłby w innym div. W jaki sposób mogę to zrobić?

Tak, faktycznie możesz z transformacjami 2D CSS. Jest to obsługiwane w prawie wszystkich nowoczesnych przeglądarkach, w tym w IE9 +. Oto przykład.

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 */
}

WSKAZÓWKA: Może być konieczne dodanie marginesu do rozciągniętego tekstu, aby zapobiec kolizji tekstu.

Odpowiem za rozciąganie tekstu w poziomie, ponieważ pion jest prostą częścią - po prostu użyj "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>

odstępy między literami po prostu dodają odstępy między literami, niczego nie rozciągają, ale są względne

inline-block, ponieważ elementy inline są zbyt restrykcyjne i poniższy kod nie działałby inaczej

Teraz kombinacja, która robi różnicę

rozmiar czcionki, aby uzyskać żądany rozmiar - w ten sposób tekst będzie naprawdę miał taką długość, jaką ma być, a tekst przed i po nim pojawi się obok niego (scaleX jest tylko do pokazania, przeglądarka nadal widzi element w oryginalnym rozmiarze podczas pozycjonowania innych elementów).

scaleY, aby zmniejszyć wysokość tekstu, tak aby był taki sam, jak tekst obok.

transform-origin, aby skalować tekst od góry wiersza.

margin-bottom ustawiono na wartość ujemną, aby następna linia nie znajdowała się dużo poniżej - najlepiej procentowo, abyśmy nie zmienili właściwości line-height. wyrównanie w pionie ustawione do góry, aby zapobiec unoszeniu się tekstu przed lub po na inne wysokości (ponieważ rozciągnięty tekst ma rzeczywisty rozmiar 32px)

- Prosty element span ma rozmiar czcionki, tylko jako odniesienie.

Pytanie dotyczyło sposobu, aby zapobiec pogrubieniu tekstu spowodowanemu przez rozciągnięcie i nadal go nie podałem, ALE właściwość font-weight ma więcej wartości niż zwykłe i pogrubione .

Wiem, po prostu tego nie widzisz, ale jeśli szukasz odpowiednich czcionek , możesz użyć większej liczby wartości.

Technicznie nie. Ale możesz użyć rozmiaru czcionki, który jest tak wysoki, jak chcesz, aby rozciągnięta czcionka była, a następnie skondensować ją w poziomie font-stretch.

Jedynym sposobem, w jaki przychodzi mi na myśl w przypadku krótkich tekstów, takich jak „MENU”, jest umieszczenie każdej pojedynczej litery w odstępie, a następnie uzasadnienie ich w pojemniku. Lubię to:

<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>

A potem CSS:

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

...

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

CSS font-stretch jest teraz obsługiwany we wszystkich głównych przeglądarkach (z wyjątkiem iOS Safari i Opera Mini). Nie jest łatwo znaleźć typową rodzinę czcionek, która obsługuje rozwijane czcionki, ale łatwo jest znaleźć czcionki obsługujące kondensację, na przykład:

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

Zawsze wracam na tę stronę, gdy projektant naciąga na mnie czcionkę. Przyjęte rozwiązanie działa świetnie, ale często mam problemy z marginesami.

Poleciłbym użycie przekształcenia wysokości zamiast szerokości, jeśli napotkasz problemy, było to dla mnie bezpieczniejsze w moim obecnym projekcie.

.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);
}