Как сделать обводку текстом с прозрачным текстом

Question

Я нашел это решение: эффект контура для текста Что здорово, но возможно ли сделать текст прозрачным и нарисовать только контур? Например, это происходит с box-shadow, так как даже если у box нет фона, вы не увидите тень "под" box. Но с текстом, если он прозрачный, вы видите всю тень типа. Можно ли получить только контур с прозрачным текстом?

РЕДАКТИРОВАТЬ: Проблема с этим заключается в том, чтобы иметь хороший запасной вариант для браузеров, которые не поддерживают, например, -webkit-text-outline, потому что они не будут рисовать контур, и они сделают текст невидимым...

Answer 1

Вы можете получить прозрачный текст с помощью штриха с помощью встроенного SVG.

Вы можете использовать <text> элемент ( подробнее о MDN) установить fill собственность на none или же transparent сделать текст прозрачным и использовать stroke Porperty, чтобы сделать текстовый план. stroke-width а также stroke-color можно определить толщину и цвет обводки текста

Вот пример: прозрачный текст с белым штрихом и фоновое изображение, показывающее сквозь текст:

body {
  background: url('https://farm9.staticflickr.com/8760/17195790401_94fcf60556_c.jpg');
  background-size: cover;
}
svg{width:100%;}

<svg viewbox="0 0 10 2">
  <text x="5" y="1" text-anchor="middle" font-size="1" fill="none" stroke-width=".015" stroke="#fff" font-family="sans-serif">Text stroke</text>
</svg>

Answer 2

Что ж, с помощью CSS3 это возможно, но только с определенными префиксами браузера. Объединяя color: transparent будет генерировать то, что вы ищете.

Например:

span {
    color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}

jsFiddle Demo

Однако стоит отметить, что использование text-stroke-* все еще ограничен. Пожалуйста, обратитесь к я могу использовать.

Если вы хотите хороший запасной вариант, вы можете использовать медиа-запрос:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    span {
        color: #000;
    }
}

Answer 3

Наконец-то я нашел ответ на проблему с инсультом:

span{
    color: white;
    text-shadow: 1px 1px black, -1px -1px black;
}
@supports(-webkit-text-stroke: 1px black){
    span{
        color: transparent;
        -webkit-text-stroke: 1px black;
        text-shadow: none;
    }
}

Это работает, поскольку @supports уже давно реализована в большинстве браузеров webkit, таких как chrome и opera.