我正在尝试用HTML实现一种特定的视觉样式，针对目标元素写了如下CSS代码：

h1 *:nth-child(2) {
  font-family: "ImpactURW";
  font-size: 50vw;
  letter-spacing: 1vw;
  line-height: 0.8;
  margin: -3vw 0 1vw 0;
  -webkit-text-stroke-width: 2.5px;
  -webkit-text-stroke-color: black;
  background-image: linear-gradient(to bottom, transparent 55%, #ccc 45%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

这段代码用其他字体的时候基本都能得到预期效果，但唯独用ImpactURW字体时出问题，我实在搞不懂原因。

奇怪的是，当页面尺寸很小的时候（因为字体大小用了vw单位，字体也会随之缩小），偶尔能渲染正常；但到了预期的大尺寸时，就彻底崩了：

• 小尺寸时的正常渲染效果：
• 稍大尺寸的异常效果：

而且这是跨浏览器的问题，Chrome和Firefox里都出现同样的情况，所以我怀疑是不是字体文件本身损坏了？或者我的代码有问题但可以修正？

另外，不管调整stroke-width到什么值，都会出现同样的异常（而且第一张图里的stroke宽度本来就偏粗了）。其他字体都能正常工作，但那些字体不是我想要的风格，真的很头疼。

有没有大佬遇到过类似的问题？求指点一下可能的原因和解决办法！