我需要关于渐变斜体文本的建议

Question

我发现了一个在文本上应用渐变的技巧。它可以，但是当我应用斜体字体样式时，字体在极端处有点剪裁

h2 {
  font-family: 'FMono';
  text-transform: uppercase;
  font-style: normal;
  font-weight: 900;
  font-size: 5rem;
  line-height: 0rem;
  color: #000;
}

h2 > span {
  font-family: 'FMono';
  text-transform: uppercase;
  font-style: italic;
  font-weight: 900;
  font-size: 5rem;
  line-height: 15rem;
  background: linear-gradient(152.36deg, #FF1053 26.66%, #AF19E4 89.65%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<h2>sport your <br> <span>creativity</span> </h2>

Answer 1

只需将padding-left: 10px 添加到跨度...

h2 {
  font-family: 'FMono';
  text-transform: uppercase;
  font-style: normal;
  font-weight: 900;
  font-size: 5rem;
  line-height: 0rem;
  color: #000;
}

h2 > span {
  font-family: 'FMono';
  text-transform: uppercase;
  font-style: italic;
  font-weight: 900;
  font-size: 5rem;
  line-height: 15rem;
  background: linear-gradient(152.36deg, #FF1053 26.66%, #AF19E4 89.65%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 10px;
}

<h2>sport your <br> <span>creativity</span> </h2>