Вопрос:
Можно ли растянуть текст в 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>
межбуквенный интервал просто добавляет пробел между буквами, ничего не растягивает, но это своего рода относительный
inline-block, потому что встроенные элементы слишком ограничены и код ниже не будет работать в противном случае
Теперь комбинация, которая имеет значение
размер шрифта, чтобы получить желаемый размер – таким образом, текст будет иметь ту длину, которая должна быть, а текст до и после него появится рядом с ним (scaleX только для галочки, браузер по-прежнему видит элемент в его исходном размере при размещении других элементов).
scaleY, чтобы уменьшить высоту текста, чтобы он соответствовал тексту рядом с ним.
transform-origin, чтобы сделать масштаб текста сверху строки.
margin-bottom установлен в отрицательное значение, чтобы следующая строка была не намного ниже – предпочтительно в процентах, чтобы мы не изменили свойство line-height.
вертикальное выравнивание установлено в верхнюю часть, чтобы предотвратить перемещение текста до или после на другую высоту (поскольку размер растянутого текста составляет 32 пикселя)
– Простой элемент span имеет размер шрифта только для справки.
В вопросе был задан способ предотвратить выделение текста жирным шрифтом, вызванного растяжением, а я до сих пор его не дал, НО свойство font-weight имеет больше значений, чем просто обычный и жирный.
Я знаю, вы просто не можете этого увидеть, но если вы ищете соответствующие шрифты, вы можете использовать больше значений.
Ответ №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); }