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

Да, вы можете сделать это с помощью CSS 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 */
}

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

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

letter-spacing просто добавляет пространство между буквами, ничего не растягивает, но это довольно относительное

встроенный блок, потому что встроенные элементы слишком строгие, и в противном случае приведенный ниже код не работал бы

Теперь комбинация, которая имеет значение

font-size, чтобы получить желаемый размер - таким образом текст действительно будет той длины, которой должен быть, а текст до и после него будет отображаться рядом с ним (scaleX только для демонстрации, браузер по-прежнему видит элемент в исходном размере при размещении других элементов).

scaleY, чтобы уменьшить высоту текста, чтобы он был таким же, как текст рядом с ним.

transform-origin, чтобы масштабировать текст от верха строки.

margin-bottom установлен на отрицательное значение, так что следующая строка не будет далеко ниже - желательно в процентах, чтобы мы не меняли свойство line-height. vertical-align установлено на верх, чтобы текст до или после него не перемещался на другую высоту (поскольку растянутый текст имеет реальный размер 32 пикселя)

- У простого элемента span есть font-size, только как ссылка.

В вопросе был задан способ предотвратить выделение текста жирным шрифтом, вызванного растяжением, а я до сих пор его не дал, НО свойство font-weight имеет больше значений, чем просто обычный и жирный .

Я знаю, вы просто не видите этого, но если вы ищете соответствующие шрифты , вы можете использовать больше значений.

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

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

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

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

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

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

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

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