Question

我想在每个字符周围添加黑色轮廓，因此如果字体ID与前景颜色相同，则仍然可读。

可以在CSS中使用或不使用浏览器特定的CSS吗？

Answer 1

您可以使用CSS 2.1 text-shadow属性模拟它：

p {
    color: #fff;
    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}

当然，这在IE9及以下版本中不受支持。有关简单演示，请参阅：http://www.jsfiddle.net/yijiang/UCjgg/。

Answer 2

有一种显式的-webkit方式来添加文本大纲，其中包含-text-stroke。这是等效标准跟踪提案的实验性实现（在CSS3规范文档中称为文本大纲）。

Answer 3

在开始之前，我想澄清Yi Jiang's answer对你的问题是正确的，无论如何我想加点一点。

如果您需要兼容的方式，我能想到的唯一方法就是使用a font with outline by design。

您甚至可以使用Google's Font API并拥有非常兼容的解决方案。

祝你好运！

Answer 4

在等待text-stroke得到广泛支持的同时，还有一个相当不错的“文本阴影黑客”生成器可以生成所需的文本阴影属性。

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>

CSS - 是否可以在文本中的每个字符周围添加黑色轮廓？

4 个答案: