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;
}
< /code>
Это кажется более или менее правильным с практически любым шрифтом, который я использую, кроме этого конкретного шрифта, и я не знаю, почему. Иногда он будет несколько правильно, когда страница достаточно мала (размер шрифта привязан к единицам VW), но при больших размерах ожидаемых, которые ожидаются. Here it is at a smaller size:

And here it is at not much larger:
Это кросс-браузер, у меня такая же проблема в Chrome и Firefox, так что это может быть сам файл шрифта. Это повреждено? Мой код просто неправильный, но корректируемый? Регулировка ширины хода в любом размере будет вызывать тот же эффект (а верхнее изображение в любом случае имеет слишком толстую ширину хода). Это работает, как и ожидалось, с другими шрифтами, конечно, но это просто неправильные.
Подробнее здесь: https://stackoverflow.com/questions/797 ... roke-width
Мобильная версия