Есть ли альтернатива данных свойств или решение сделать текст градиентом?

Question

Попробовал данные свойства и у меня возникли вопросы.

-webkit-text-fill-color: transparent;
-webkit-background-clip: text

Стоит ли их вообще использовать, если тут требуется префикс -webkit т.е только для поддержки chrome, значит в safari и т д не будет поддерживаться?
Почему то данные свойства обрезают некоторые символы например: g, y, p половины нижней части просто нет.

Answer 1

Чем Вам префикс не угодил? Все современные браузеры, включая Safari, поддерживают свойство text-fill-color именно с префиксом -webkit-.
То же относится и к background-clip со значением text - caniuse.com.
Свойства эти ничего не обрезают. Скорее всего это какие-то несостыковки в font-size, line-height и размерами контейнеров, где текст находится. Допускаю, что может таки быть баг со слишком экзотическими шрифтами, но маловероятно.

По поводу альтернатив... Кроме того, что уже перечислили в комментарии под вопросом - <img>, <canvas>, <svg> (кучу <div> не рассматриваю в силу отсутствия возможности работать с каким-либо изображением, кроме градиента) - можно поэкспериментировать со свойствами mix-blend-mode, background-blend-mode и различными фильтрами.

Answer 2

Canvas - как один из вариантов:

(function() {
  var canvas = document.createElement("canvas");
  var w = canvas.width = 550;
  var h = canvas.height = 300;
  document.getElementById('text').appendChild(canvas);
  ctx = canvas.getContext('2d');
  ctx.font = "100px Fantasy";
  ctx.textAlign = 'left';
  var gradient = ctx.createLinearGradient(400, 0, 100, 200);
  gradient.addColorStop(0, "green");
  gradient.addColorStop(1, "red");
  ctx.fillStyle = gradient;
  ctx.fillText("Заголовок", h / 10, w / 5);
})();

<div id="text" data-text="Заголовок"></div>

Answer 3

SVG - как один из вариантов:

svg {font-family: fantasy;}

<svg viewBox="0 0 200 100">
  <defs>
    <linearGradient id="text" x1="80%" x2="0" y1="0" y2="80%" gradientUnits="userSpaceOnUse" >
      <stop stop-color="green" offset="0%"/>
      <stop stop-color="red" offset="100%"/> 
    </linearGradient>
  </defs>
    <text fill="url(#text)">
      <tspan font-size="30" x="0" dy="25">Заголовок</tspan>
    </text>
</svg>

БЛОГ НА HUSL

Есть ли альтернатива данных свойств или решение сделать текст градиентом?

Ответы (3 шт):