时间戳

首页 > 解决方案 > 如何从 CSS 中的图像复制此文本？

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

问题描述

我正在尝试使用 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>

标签： htmlcssbootstrap-4

解决方案

试试这个 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>

推荐阅读