Question

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

Answer 1

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

你是对的，你可以使用多个以逗号分隔的text-stroke创建text-shadow - 类似的效果 - 实际上你也可以使用相同的技术来添加“实际”阴影：< / p>

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

但请注意，因为IE9及以下版本中不支持text-shadow。我建议只将它用于非必要的样式：当阴影/人造轮廓不存在时，确保文本仍然可读。

Answer 2

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

这是一个现在可以在Firefox中使用的示例：

＆＃13;

.outline {
  -webkit-text-stroke: 1px red;
}

span:first-of-type { 
  display: block;
  font-size: 24pt;
  font-weight: bold;
}

＆＃13;

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

＆＃13;

请访问Mozilla网站：

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

Firefox中的Text Stroke和Shadow CSS3

2 个答案: