仅使用 CSS 拉伸字体

Question

我怎样才能使我的字体像上图那样CSS请只提供我代码

Answer 1

对于拉伸的每个字母，每个字母都需要一点自定义 CSS，除非所有字母的宽度相同。在这种情况下，你可以做得更容易一些。

我的示例中的字体不正确，但您应该能够实现这一点。您只需要调整一些值：

.stretch {
  display: inline-block;
  transform: scale(4, 1); /* amount of stretch */
  transform-origin: 0 0;
  margin-right: 2.125em; /* offset will depend on your font */
}

body {
  background-color: #0E0E0E;
  color: #1BE59B;
  font-family: sans-serif;
  font-size: 3rem;
  line-height: 1;
}
p {
  margin: 0;
}

<p>PLEA<span class="stretch">S</span>E,</p>
<p>MIN<span class="stretch">D</span></p>
<p>TH<span class="stretch">E</span></p>
<p><span class="stretch">G</span>AP</p>