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

Question

我找到了这个解决方案：Outline effect to text 哪个很好，但是是否可以使文本透明并且只绘制轮廓？例如，框阴影会发生这种情况，因为即使框没有背景，您也不会看到框的阴影 "under"。但是对于文本，如果它是透明的，您会看到字体的整个阴影。是否可以只得到透明文本的轮廓？

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

Answer 1

好吧，使用 CSS3 这是可能的，但仅限于某些浏览器前缀。组合 color: transparent 将生成您要查找的内容。

例如：

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

jsFiddle Demo

但值得注意的是，text-stroke-* 的使用仍然受到限制。请参考Can I Use.

如果你想要一个不错的回退，你可以使用媒体查询：

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

Answer 2

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

您可以使用 <text> 元素 (more info on 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 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 中实施了一段时间了。

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

How to make a text stroke with transparent text

css

svg

strokeshadow

css-shapes