如何用透明文字制作文字描边

Question

我找到了这个解决方案：文本的轮廓效果 这很棒，但是是否可以使文本透明而只绘制轮廓？ 例如，这种情况发生在盒子阴影中，即使盒子没有背景，你也不会看到盒子“下方”的阴影。但对于文本，如果它是透明的，您可以看到该类型的整个阴影。 是否可以只获取带有透明文本的轮廓？

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

Answer 1

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

您可以使用

<text>

 元素（

MDN 上的更多信息）将 fill

 属性设置为 

none

 或 

transparent

 使文本透明，并使用 

stroke

 属性来制作文本轮廓。 

stroke-width

 和 

stroke-color

 可以定义文字描边粗细和颜色

这是一个示例：

带有白色描边的透明文本和背景图像通过文本显示：

body {
  background-size: cover;
}
svg{
  width:100%;
  background-color: #333;
  box-shadow: inset -50px -50px 100px pink;
}

<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 演示

但值得注意的是，

text-stroke-*

的使用仍然有限。请参阅

我可以使用吗。

如果你想要一个好的后备，你可以使用媒体查询：

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

Answer 3

我终于找到了 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）中实现了一段时间了。