Firefox中的Text Stroke和Shadow CSS3

Question

嘿伙计们,我想知道是否有一种方法可以为文本添加笔触和阴影,我可以在Chrome和Safari中使用它,因为webkit支持文本笔划和文本阴影.我可以在Firefox中显示笔划但是使用文本阴影并使用偏移量进行播放.所以有人知道解决这个问题的方法.

Answer 1

该text-stroke属性不是标准CSS规范的一部分,因此最好避免使用它 - Chrome可以随时将其撤出.

你是对的,你可以text-stroke使用多个以逗号分隔的text-shadows 来创建类似的效果- 实际上你也可以使用相同的技术来添加"实际"阴影:

h1 {
    font-size: 100px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #F00, -1px -1px 0 #F00, 1px -1px 0 #F00,
            -1px 1px 0 #F00, 3px 3px 5px #333;
}?

但要小心,因为text-shadow在IE9及以下版本中也不支持.我建议只将它用于非必要的样式:当阴影/虚假轮廓不存在时,确保文本仍然可读.

Answer 2

Firefox 48 现在支持文本笔画（带有前缀-webkit），以及其他一些特定于 webkit 的属性（如-webkit-text-fill-color）。请注意，该规范实际上并不存在，并且将来可能会发生变化。

下面是一个现在可以在 Firefox 中运行的示例：

.outline {
  -webkit-text-stroke: 1px red;
}

span:first-of-type { 
  display: block;
  font-size: 24pt;
  font-weight: bold;
}

<span class="outline">This text has a stroke.</span>
<span class="outline">(Even in Firefox)</span>

请参阅 Mozilla 网站：

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-中风