html - 如何从 CSS 中的图像复制此文本？

Question

我尝试使用 CSS 在 HTML 中复制图像中的文本。不过，我觉得可能有更好的方法(设置每行自己的字体大小)。

这是我试图复制的图像:

当前解决方案的问题:

• 在不同屏幕尺寸上缩放效果不佳
• 有些行比其他行长(这不合理吗？)

关于正确执行此操作有什么建议吗？

.big-text {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: bold;
  text-justify: inter-character;
  font-size: 5rem;
  line-height: 100%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>

<div class="col-md-4 big-text">
  <span>FIREWORK</span>
  <span style="font-size: 7rem;">&amp; PYRO</span>
  <span style="color: #fd0227; font-size: 8rem;">FIRING</span>
  <span style="font-size: 5.6rem;">SYSTEMS</span>
</div>

Answer 1

试试这个 SVG

<svg viewBox="0 0 200 80" xmlns="http://www.w3.org/2000/svg">
  <text y="20" font-size="0.95em">FIREWORK</text>
  <text y="40" font-size="1.45em">&PYRO</text>
  <text y="60" fill="red" font-size="1.5em">FIRING</text>
  <text y="75" font-size="1.1em">SYSTEMS</text>
</svg>