CSS'de metin uzatabilir miyim? Yazı tipinin daha büyük olmasını istemiyorum, çünkü bu, yanındaki küçük metinden daha kalın görünmesini sağlıyor. Metni dikey olarak uzatmak istiyorum, bu yüzden biraz deforme olmuş. Bu bir div içinde olacak ve daha sonra yanındaki normal metin başka bir div içinde olacaktı. Bunu nasıl yapabilirim?

Evet, aslında CSS 2D Dönüşümleri ile yapabilirsiniz. Bu, IE9 + dahil olmak üzere neredeyse tüm modern tarayıcılarda desteklenir. İşte bir örnek.

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

İPUCU: Metin çarpışmalarını önlemek için uzatılmış metninize kenar boşluğu eklemeniz gerekebilir.

Metnin yatay olarak gerilmesi için cevap vereceğim, çünkü dikey kolay bölümdür - sadece "transform: scaleY ()" kullanın

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

harf aralığı , harfler arasına boşluk ekler, hiçbir şey uzatmaz, ancak biraz görecelidir

inline-block, çünkü inline elemanlar çok kısıtlayıcıdır ve aşağıdaki kod başka şekilde çalışmaz

Şimdi farkı yaratan kombinasyon

istediğimiz boyuta ulaşmak için yazı tipi boyutu - bu şekilde metin gerçekten olması gereken uzunlukta olacak ve yanında ve öncesinde metin görünecektir (scaleX sadece göstermek içindir, tarayıcı hala öğeyi görüyor diğer öğeleri yerleştirirken orijinal boyutunda).

scaleY metnin yüksekliğini azaltmak için yanındaki metinle aynı olur.

dönüştürme-orijini metnin satırın üstünden ölçeklendirmesini sağlar.

margin-bottom negatif bir değere ayarlanmıştır, böylece bir sonraki satır çok aşağıda olmayacaktır - tercihen yüzde, böylece satır yüksekliği özelliğini değiştirmeyiz. önce veya sonra metnin diğer yüksekliklere kaymasını önlemek için üste dikey hizalama (uzatılmış metnin gerçek boyutu 32 piksel olduğundan)

- Basit span öğesinin yalnızca referans olarak yazı tipi boyutu vardır.

Soru, streç nedeniyle metnin kalınlığını önlemenin bir yolunu istedi ve hala bir tane vermedim, ancak font-weight özelliği normal ve kalından daha fazla değere sahip .

Biliyorum, bunu göremezsiniz, ancak uygun yazı tiplerini ararsanız , daha fazla değer kullanabilirsiniz.

Teknik olarak hayır. Ancak yapabileceğiniz şey, uzatılmış yazı tipinin olmasını istediğiniz uzunlukta bir yazı tipi boyutu kullanmak ve ardından yatay olarak yoğunlaştırmaktır font-stretch.

"MENU" gibi kısa metinler için düşünebilmemin tek yolu, her harfi bir açıklığa koymak ve daha sonra bir kapta haklı göstermek. Bunun gibi:

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

Ve sonra CSS:

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

...

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

CSS font-stretch artık tüm büyük tarayıcılarda (iOS Safari ve Opera Mini hariç) desteklenmektedir. Genişleyen fontları destekleyen ortak bir font ailesi bulmak kolay değildir, ancak yoğunlaştırmayı destekleyen fontları bulmak kolaydır, örneğin:

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

Bir tasarımcı üzerimde bir yazı tipi uzattığında her zaman bu sayfaya geri döner. Kabul edilen çözüm harika çalışıyor, ancak sık sık marjlarla ilgili sorunlarla karşılaşıyorum.

Sorunlarla karşılaşıyorsanız, genişlik yerine yükseklik üzerinde dönüşüm kullanmanızı öneririm, mevcut projemde benim için daha güvenli bir hayattı.

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