css - 文本笔划跨浏览器

Question

我正在尝试新的文本笔划功能，并在网上搜索了跨浏览器解决方案。目前我只能通过 webkit 属性找到它。

-webkit-text-stroke: 2px #FF1E00;

您能否让我知道是否有办法让所有浏览器都以相同的方式显示？

Answer 1

.strokeme
{
    color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
}

来自：轮廓效果到文字

“我所做的是使用已经支持的 text-shadow 属性（我相信在 Chrome、Firefox、Opera 和 IE 9 中都支持）。”

Answer 2

截至 2012 年 5 月 24^日，没有跨浏览器解决方案，因为根据http://caniuse.com/#search=text-stroke只有 webkit 支持实验功能。您可以（在某种程度上）text-shadow在元素上使用 4 或 5 来模拟这一点。

演示：Text Stroke，在 CSS-Tricks.com 上

Answer 3

你可以试试strokeText.js，一个普通的 javascript 插件。

• 笔画不会像它们那样与您的文本重叠 -webkit-text-stroke
• 支持除IE8及以下所有浏览器
• 可选择的文本
• 无依赖

完全公开，我制作了插件。

Answer 4

这不能在本地跨浏览器完成，但可以通过不支持的浏览器的后备来实现：

color: blue;
-webkit-text-stroke-color: blue;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 3px;

这样，webkit 浏览器将显示带有蓝色轮廓的白色文本，但其他浏览器仍将显示您选择的颜色（本例为蓝色）。