如何使用透明文本创建文本描边

Question

我找到了这个解决方案：文字轮廓效果。虽然很好，但是是否可能使文本透明，只绘制轮廓？例如，使用box-shadow时，即使盒子没有背景，您也不会在盒子“下面”看到阴影。但是对于文本，如果它是透明的，则会看到整个类型的阴影。是否可能仅使用透明文本获取轮廓？

编辑：该问题在于如何为不支持-webkit-text-outline的浏览器提供良好的回退，因为它们不会绘制轮廓并使文本不可见...

- Vandervals

Answer 1

你可以使用内联SVG实现具有文本描边的透明文本。

可以使用<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>

- web-tiki

---

@Vandervals 那是错误的。它是响应式的，可以被谷歌索引和选择，就像普通的HTML一样。(自2010年起) - web-tiki

@Vandervals 和我会添加，它比 text-stroke 有更广泛的浏览器支持。 - web-tiki

似乎更好的选择是使用text-stroke，因为它是一个非官方的扩展，已经从w3c规范中删除（因此，在未来的更新中可能会在Chrome等浏览器中被删除）。 - zelexir

为什么你想要这样做？难道你不能编辑HTML吗？ - web-tiki

称呼我为新手或拘谨，但我喜欢将样式和内容分开。 - Vandervals

Answer 2

使用CSS3是可以实现这一点的，但只有在特定浏览器前缀下才可以。将color: transparent结合起来，就可以生成您所需要的效果。

例如：

好的，使用CSS3可以做到这一点，但是只有在特定的浏览器前缀下才能实现。结合color: transparent属性可以生成您所需要的效果。

例如：

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

jsFiddle演示

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

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

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

- BenM

---

这个问题有没有moz和ms版本？因为这个问题是你不能说：“如果你不是webkit，就不要将颜色显示为透明”（否则它就不会很响应）。当然，你可以用js来检查它，并将其作为一个特定的类包含进去，但是有没有仅使用CSS的解决方案呢？ - Vandervals

你可以使用媒体查询，例如 @media screen and (-webkit-min-device-pixel-ratio:0) 来实现这个功能。 - BenM

我认为现在有一种半标准的“text-stroke”了？ - rogerdpack

@rogerdpack 是的，现在似乎已经非常标准了：http://caniuse.com/#feat=text-stroke - BenM

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;
    }
}

由于大多数 Webkit 浏览器，如 Chrome 和 Opera，在一段时间内已经实现了 @supports，因此这是有效的。

- Vandervals

---

我猜这完全取决于你的浏览器受众。http://caniuse.com/#feat=css-featurequeries 相对于 http://caniuse.com/#search=svg - zelexir

通过结合这两个属性的浏览器支持，可以在 Chrome、Opera 和 Android 浏览器中仅显示文本描边。 - web-tiki

@Web-tiki 请再看一下。描边将始终显示，无论是作为描边还是作为文本阴影。改变的是字体将变为透明或白色。好处是您可以匹配背景颜色或通用颜色，如果它是一个图像。 - Vandervals

但是这有什么意义呢？我不是在寻求备选方案吗？ 我认为你的答案也很好（肯定更适合设计目的），但有没有可能以某种方式将其引入CSS中？ - Vandervals

@Vandervals，在我回答之后，您编辑了回退部分。我理解您想要保持样式和内容分离的意愿，但是对于这个特定的任务，使用SVG方法浏览器支持更好。我怀疑以base64编码的SVG中的文本是否被Google索引，因为它将被视为“background-image”，所以我不建议这样做。但是您可以在此处执行此操作http://jsfiddle.net/webtiki/j04nz9yd/。 - web-tiki