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

Question

我找到了这个解决方案:对文本进行轮廓效果 这很好,但是可以使文本透明而且只绘制轮廓吗？例如,盒子阴影会发生这种情况,因为即使盒子没有背景,你也不会在盒子下方看到阴影.但是对于文本,如果它是透明的,你可以看到该类型的整个阴影.只获得透明文字的轮廓是否可行？

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

Answer 1

好吧，使用 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 2

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

您可以使用<text>元素(MDN上的更多信息)设置fill属性none或transparent使文本透明,并使用strokeporperty来制作文本大纲.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 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）中实现了一段时间。