更改字体高度和宽度

Question

当我想要改变font-size而不是两个可以独立改变文本宽度和高度的属性时，我正在处理这个问题。 因此，在将font-width: 50%应用于此时：

文本将延伸到一半：

这可能与CSS有关，还有高度属性吗？

Answer 1

CSS3 transform具有scale功能：

p {
  display: inline-block;
  font-size: 32px;
  transform: scale(.5, 1);
}

<p>This is text.</p>

分别在X轴和Y轴的功能中使用两个数字。

Answer 2

您可以尝试在x方向上缩放字体。

p{
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
}

- 编辑 -

我看到@Xufox alredy回答了它。

Answer 3

我能找到的最接近的是font-weight

它不仅接受粗体，普通，还接受数值。 100-900增量100-900。

 . Paragraph {font-weight :700;}

这与高度属性相结合应该有所帮助，但不会给你完整的解决方案

同时查看间距属性，因为可以减少单词的宽度

  letter-spacing: 2px; 

Answer 4

使用带有preserveAspectRatio="none"的svg文本可以使文本变形和非常精确的定位。

要进行调整，全都与viewBox有关。渲染保持本地响应浏览器的大小。

文本保持选择状态。

.title {
  width: 540px;
  height: 40px
}

.content {
  width: 300px;
  height: 400px
}

.side {
  width: 270px;
  height: 100px;
  color: red;
  position: absolute;
  right: 30px;
  top: 160px;
  transform: rotate(44deg)
}

<div class="title">
  <svg preserveAspectRatio="none" x="0" y="30" viewBox="0 0 100 15" width="100%" height="100%">
   <foreignObject x="5" y="1" height="100%" width="100%">
      <div>
        Hello world!
       </div>
     </foreignObject>    
  </svg>
</div>

<div class="content">
  <svg preserveAspectRatio="none" x="0" y="30" viewBox="0 0 400 200" width="100%" height="100%">
    <foreignObject x="55" y="15" height="100%" width="80%">
      <div>
       The best way to use a hello cheer for introducing players is to have one cheerleader use a megaphone or loudspeaker to announce the players names and stats.
       </div>
     </foreignObject>     
  </svg>
</div>


<div class="side">
  <svg preserveAspectRatio="none" x="0" y="30" viewBox="0 0 100 100" width="100%" height="100%">
    <foreignObject x="5" y="15" height="200%" width="100%">
      <div>
       NOW WITH COLORS!
       </div>
     </foreignObject>     
  </svg>
</div>