CSS - 是否可以在文本中的每个字符周围添加黑色轮廓？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4772906/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - Is it possible to add a black outline around each character in text?
提问by Justin808
I would like to add a black outline around each character, so if the font id on the same color background as the foreground it is still readable.
我想在每个字符周围添加一个黑色轮廓，所以如果字体 id 与前景颜色背景相同，它仍然可读。
Can this be done in CSS with or without browser specific css?
这可以在带有或不带有浏览器特定 css 的 CSS 中完成吗？
回答by Yi Jiang
You can simulate it with the CSS 2.1 text-shadowproperty:
您可以使用 CSS 2.1text-shadow属性模拟它：
p {
color: #fff;
text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}
This is, of course, not supported in IE9 and below. See: http://www.jsfiddle.net/yijiang/UCjgg/for a simple demo.
当然，这在 IE9 及更低版本中不受支持。有关简单演示，请参见：http: //www.jsfiddle.net/yijiang/UCjgg/。
回答by Michael Mullany
There is an explicit -webkit way to add text outline, which is with -text-stroke. This is the experimental implementation of the equivalent standards track proposal (called text-outline in the CSS3 spec docs).
有一种显式的 -webkit 方式来添加文本大纲，即使用-text-stroke。这是等效标准轨道提案（在 CSS3 规范文档中称为 text-outline）的实验性实现。
回答by FelDev
While we wait for text-stroketo be widely supported, there's a pretty good "text-shadow hack" generator out there to generate the text-shadow property you need.
在我们等待text-stroke得到广泛支持的同时，有一个非常好的“text-shadow hack”生成器可以生成您需要的 text-shadow 属性。
https://owumaro.github.io/text-stroke-generator/
https://owumaro.github.io/text-stroke-generator/
h1 {
color:#00ff19;
text-shadow: rgb(0, 0, 0) 3px 0px 0px, rgb(0, 0, 0) 2.83487px 0.981584px 0px, rgb(0, 0, 0) 2.35766px 1.85511px 0px, rgb(0, 0, 0) 1.62091px 2.52441px 0px, rgb(0, 0, 0) 0.705713px 2.91581px 0px, rgb(0, 0, 0) -0.287171px 2.98622px 0px, rgb(0, 0, 0) -1.24844px 2.72789px 0px, rgb(0, 0, 0) -2.07227px 2.16926px 0px, rgb(0, 0, 0) -2.66798px 1.37182px 0px, rgb(0, 0, 0) -2.96998px 0.42336px 0px, rgb(0, 0, 0) -2.94502px -0.571704px 0px, rgb(0, 0, 0) -2.59586px -1.50383px 0px, rgb(0, 0, 0) -1.96093px -2.27041px 0px, rgb(0, 0, 0) -1.11013px -2.78704px 0px, rgb(0, 0, 0) -0.137119px -2.99686px 0px, rgb(0, 0, 0) 0.850987px -2.87677px 0px, rgb(0, 0, 0) 1.74541px -2.43999px 0px, rgb(0, 0, 0) 2.44769px -1.73459px 0px, rgb(0, 0, 0) 2.88051px -0.838247px 0px;
}<h1>yayyy text</h1>回答by Trufa
Before I start I want to clarify that Yi Jiang's answeris the correct one to your question as it is, anyway I wanted to add up a little.
在我开始之前，我想澄清一下，易江的答案是对你的问题的正确答案，无论如何我想加起来一点。
If you need compatible way of doing this, the only way I can think of is using a font with outline by design.
如果您需要兼容的方式来做到这一点，我能想到的唯一方法是使用带有轮廓设计的字体。
You could even use the Google's Font APIand have a very compatible solution.
您甚至可以使用Google 的 Font API并拥有非常兼容的解决方案。
Good luck!
祝你好运！
