Могу ли я растянуть текст с помощью CSS?

Можно ли растянуть текст в CSS? Я не хочу, чтобы шрифт был больше, потому что это делает его более жирным, чем мелкий текст рядом с ним. Я просто хочу растянуть текст по вертикали, чтобы он как-то деформировался. Это будет в одном div, а затем обычный текст рядом с ним будет в другом div. Как я могу это сделать?

Ответ 1

Да, вы можете на самом деле с помощью 2D 2D Transforms. Это поддерживается практически во всех современных браузерах, включая IE9+. Вот пример.

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

СОВЕТ: Вам может потребоваться добавить маржу к растянутому тексту, чтобы предотвратить текстовые конфликты.

Ответ 2

Я отвечу за горизонтальное растяжение текста, так как вертикальная часть - самая простая часть - просто используйте "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>

Ответ 3

Технически, нет. Но то, что вы можете сделать, это использовать размер шрифта, который так высок, как вы хотите, чтобы растянутый шрифт был, а затем конденсировать его по горизонтали с помощью font-stretch.

Ответ 4

CSS font-stretch теперь поддерживается во всех основных браузерах (кроме iOS Safari и Opera Mini). Нелегко найти общее семейство шрифтов, которое поддерживает расширяющиеся шрифты, но легко найти шрифты, которые поддерживают уплотнение, например:

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

Ответ 5

Единственный способ, который я могу придумать для коротких текстов, таких как "МЕНЮ", - это поместить каждую букву в промежуток и впоследствии выровнять их в контейнере. Как это:

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

А потом CSS:

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

...

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

Ответ 6

Всегда возвращаюсь на эту страницу, когда дизайнер натягивает на меня шрифт. Принятое решение прекрасно работает, но я часто сталкиваюсь с проблемами с полями.

Рекомендую использовать преобразование по высоте, а не по ширине, если вы сталкиваетесь с проблемами, для меня это было безопаснее в моем текущем проекте.

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