Bisakah saya merentangkan teks dalam CSS? Saya tidak ingin font menjadi lebih besar, karena itu membuatnya tampak lebih berani daripada teks yang lebih kecil di sampingnya. Saya hanya ingin meregangkan teks secara vertikal sehingga agak cacat. Ini akan berada di satu div, dan kemudian teks normal di sampingnya akan di div lain. Bagaimana saya bisa melakukan ini?

Ya, Anda sebenarnya dapat dengan CSS 2D Transforms. Ini didukung di hampir semua browser modern, termasuk IE9 +. Ini sebuah contoh.

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

TIP: Anda mungkin perlu menambahkan margin ke teks yang diregangkan untuk mencegah benturan teks.

Saya akan menjawab peregangan horizontal teks, karena vertikal adalah bagian yang mudah - cukup gunakan "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>

spasi huruf hanya menambah ruang antar huruf, tidak membentang apa-apa, tapi agak relatif

inline-block karena elemen inline terlalu membatasi dan kode di bawah ini tidak akan berfungsi sebaliknya

Sekarang kombinasi yang membuat perbedaan

font-size untuk mencapai ukuran yang kita inginkan - dengan cara itu teks akan benar-benar panjang seperti seharusnya dan teks sebelum dan sesudah akan muncul di sebelahnya (scaleX hanya untuk pertunjukan, browser masih melihat elemen pada ukuran aslinya ketika memposisikan elemen lain).

scaleY untuk mengurangi ketinggian teks, sehingga sama dengan teks di sebelahnya.

transform-origin untuk membuat skala teks dari atas baris.

margin-bottom ditetapkan ke nilai negatif, sehingga baris berikutnya tidak akan jauh di bawah - lebih disukai persentase, sehingga kami tidak akan mengubah properti tinggi-garis. setel vertikal ke atas, untuk mencegah teks sebelum atau sesudah melayang ke ketinggian lain (karena teks yang diregangkan memiliki ukuran nyata 32px)

- Elemen bentang sederhana memiliki ukuran font, hanya sebagai referensi.

Pertanyaannya meminta cara untuk mencegah keberanian teks yang disebabkan oleh peregangan dan saya masih belum memberikannya, TETAPI properti font-weight memiliki nilai lebih dari sekadar normal dan tebal .

Saya tahu, Anda tidak bisa melihat itu, tetapi jika Anda mencari font yang sesuai , Anda dapat menggunakan lebih banyak nilai.

Secara teknis, tidak. Tapi yang bisa Anda lakukan adalah menggunakan ukuran font yang setinggi yang Anda inginkan, dan kemudian memadatkannya secara horizontal font-stretch.

Satu-satunya cara yang dapat saya pikirkan untuk teks pendek seperti "MENU" adalah dengan meletakkan setiap huruf dalam satu rentang dan membenarkannya dalam wadah sesudahnya. Seperti ini:

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

Dan kemudian CSS:

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

...

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

CSS font-stretch sekarang didukung di semua browser utama (kecuali iOS Safari dan Opera Mini). Tidak mudah untuk menemukan keluarga font yang umum yang mendukung perluasan font, tetapi mudah untuk menemukan font yang mendukung kondensasi, misalnya:

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

Selalu kembali ke halaman ini ketika seorang desainer membentangkan font pada saya. Solusi yang diterima bekerja dengan baik, tetapi saya sering mengalami masalah dengan margin.

Akan merekomendasikan menggunakan transformasi pada ketinggian daripada lebar jika Anda mengalami masalah, adalah lebih aman bagi saya dalam proyek saya saat ini.

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