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

Question

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

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

Answer 1

您可以使用带有内联 svg 的text-stroke来实现透明文本。

您可以使用<text>元素（有关 MDN 的更多信息）将fill属性设置为none或transparent使文本透明，并使用stroke属性使文本轮廓。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 演示

值得注意的是，使用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）中实现了一段时间。