如何使用透明文本制作文本笔划

Question

我找到了这个解决方案：Outline effect to text 哪个很棒，但是可以使文本透明并且只绘制轮廓吗？ 例如，盒子阴影会发生这种情况，因为即使盒子没有背景，你也不会看到阴影＆＃34;＆＃34;盒子。但是对于文本，如果它是透明的，你可以看到该类型的整个阴影。 只获得带有透明文字的轮廓是否可行？

编辑： 这样做的问题是对不支持例如-webkit-text-outline的浏览器有一个很好的回退，因为它们不会绘制轮廓，它们会使文本不可见......

Answer 1

您可以使用内联svg实现带有文本笔划的透明文本。

您可以使用<text>元素（more info on MDN）将fill属性设置为none或transparent，以使文字透明并使用{{ 1}} porperty来制作文字大纲。 stroke和stroke-width可以定义短信笔画粗细和颜色

以下是一个示例：透明文字，带有白色笔划和背景图片，通过文字显示：

stroke-color

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

Answer 2

我终于找到了对webkit中风问题的回应答案：

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一段时间了。