在所有浏览器中做一个坚实的文本大纲/笔画的最佳方法？答案

【问题标题】：Best way to do a solid Text Outline/Stroke in all browsers?在所有浏览器中做一个坚实的文本大纲/笔画的最佳方法？
【发布时间】：2012-01-18 19:35:54
【问题描述】：

我在将轮廓/笔划应用于看起来不错和/或什至适用于每个浏览器的文本时遇到问题。现在我正在使用：

<div style="font-family: Helvetica,sans-serif;color: #FFFFFF;font-size:40px;font-weight:bold;letter-spacing:-1px;text-shadow:2px 2px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000;filter:DropShadow(Color=#000000, OffX=2, OffY=2);">Text Example</div>

虽然这会将轮廓应用于 Firefox、Chrome 和 Safari 上的文本 - 它看起来不太好，因为某些角不使用轮廓，而且轮廓甚至在 IE 中都不起作用，所以它切换到 just使用阴影。是否有更好的方法来应用文本轮廓/笔触，使其看起来更好并且在每个浏览器中都可以使用？

【问题讨论】：

标签： html text shadow outline stroke

【解决方案1】：

文本阴影并非旨在模拟笔触，因此请注意。

【讨论】：

你能建议一个正确的方法吗？而且我不能使用图片，这个文本将是动态的。
您可以尝试将文本放在不同大小的文本之上，或者替换 Flash 文本？（哎呀！）mikeindustries.com/blog/sifr。这并不是真正的“准备好迎接黄金时段”的功能。
当我尝试时，文本顶部的文本似乎不是一个好的解决方案，因为将文本仅增大 1px 会使它太大而无法充当轮廓。我还尝试在文本上使用多层文本，这也可以很好地工作（视觉上），但问题在于制作更厚的边框，需要许多层才能让后面的文本充当边框以完全描边前面的文本并最终它只是开始变得过于分散并导致更多的差距。
是的，我不认为有一个简单的解决方案。对不起。

【解决方案2】：

改用 SVG。看看here

【讨论】：

您可以考虑添加更多细节并解释原因:-)

【解决方案3】：

其实 text-shadow 并不是为了给文字添加笔触，所以它不会产生你想要的准确效果。但是，如果您使用 1px/-1px 大小的阴影，它看起来可以接受。

您可以尝试使用 JavaScript。“http://www.netzgesta.de/dev/text/#overview”

看看对你有没有帮助。

【讨论】：