Странные результаты с шириной -webkit-text-troke?CSS

Разбираемся в CSS
Ответить
Anonymous
 Странные результаты с шириной -webkit-text-troke?

Сообщение Anonymous »

Я пытаюсь достичь определенного визуального стиля в HTML. Мой CSS для пролета выглядит как следующее: < /p>
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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»