更改字体高度和宽度答案

【问题标题】：Change font height and width更改字体高度和宽度
【发布时间】：2016-01-01 03:31:17
【问题描述】：

我想改变的不是文本的font-size，而是相对于其宽度和高度的两个独立属性。因此，通过将font-width: 50% 应用于此元素：

文本将被拉伸到一半：

这可以使用 CSS 实现吗？

【问题讨论】：

“如果你在这里的懒惰是一个小提琴”。不知道接下来会怎样。有了这个 jquery 可以提供帮助。在哪里创建一个数字并更改 2 个 CSS 属性。为了清楚起见，您想独立控制文本的宽度和高度。你现在如何控制宽度
stackoverflow.com/questions/15649244/responsive-font-size 这可能会有所帮助
css中有一个font-width-stretch属性，但目前所有主流浏览器都不支持
您可以使用字体粗细。

标签： html css

【解决方案1】：

CSS transform 具有 scale 功能：

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

&lt;p&gt;This is text.&lt;/p&gt;

将函数中的两个数字分别用于X轴和Y轴。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

我能找到的最接近的是字体粗细

它不仅接受粗体、正常值，还接受数值。 100-900 以 100 为增量。

 . Paragraph {font-weight :700;}

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

还可以查看间距属性，因为这样可以减少单词的宽度

  letter-spacing: 2px;

【讨论】：

宽度不是重量。
这是一个简单的解决方案，我喜欢它。

【解决方案4】：

将svg 文本与preserveAspectRatio="none" 一起使用允许文本变形和非常精确的定位。

要调整，一切都与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>

提示：对于复杂的东西，传单制作，使用cm css 单元效果很好。

【讨论】：