Question

假设我必须保留一组字体颜色，并且它覆盖了任何颜色的内容，我怎样才能确保字体的可读性无论它覆盖什么？

这是一个jsFiddle来展示我试图描述的效果。 http://jsfiddle.net/4AUDr/

#overlay 
{
    position: relative;
    top: -150px;
    color: #860101;
}

Meme字幕使用带有黑色轮廓的白色文字使其在任何假设的meme图像上都可读，但是我不认为有一种跨浏览器兼容的CSS方法可以实现这一点，而且它看起来很可能小字体可怕。

这个问题有什么解决方案？

Answer 1

您可以试用text-shadow属性（MDN doc），例如：

text-shadow: white 0px 0px 10px;

（jsFiddle）

IE10支持它。对于IE9，您可以按照this answer使用专有的Internet Explorer过滤器。

Answer 2

虽然text-shadow很好，但它实际上并不能提供你想要的结果。阴影是阴影，大多数可读文本需要的是“文本边框”。不幸。在css中没有text-border这样的东西，但是我们可以创建一个！

我很惊讶多少阴影不受欢迎。这种情况下，通过多个阴影，你可以创造奇迹：

<强> CSS

p {
    color: white;
    font-size: 20px;
    text-shadow:
        0.07em 0 black,
        0 0.07em black,
        -0.07em 0 black,
        0 -0.07em black;
}

此样式只会在文本周围（向上，向下，向左，向右）添加一个细影（实际字体大小的7％）。

但四个阴影够吗？也许你可以用八个获得更好的结果？看起来答案是肯定的，对我来说很有意义，但也可能是我们在这里做得过头了。请注意，在这种情况下，我还减少了每个阴影的大小：

<强> CSS

p.with-eight {
    text-shadow:
        0.05em 0 black,
        0 0.05em black,
        -0.05em 0 black,
        0 -0.05em black,
        -0.05em -0.05em black,
        -0.05em 0.05em black,
        0.05em -0.05em black,
        0.05em 0.05em black;
}

然后在彩色背景的这个标记中，你有一个很好的可读文本：

<强> HTML

<html>
<body>
    <p>This text is readable on any background.</p>
    <p class="with-eight">This text is using eight text-shadows.</p>
</body>
</html>

JSFiddle example here

Answer 3

您可以使用css3属性text-shadow

警告：浏览器兼容性问题（IE9不支持）

http://caniuse.com/css-textshadow

一个简单的例子：

.shadow {text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);}

http://jsfiddle.net/H4JtR/

如果您使用白色阴影而不是黑色字体，反之亦然，无论覆盖什么内容，您的文字都是可读的。

另一种选择是使用具有透明度的background-color（您可能希望将其应用于内联元素，例如span或p而不是div，因为background-color将适用于整个div区域，即使没有文本也是如此）

background: rgba(33, 33, 33, .9);

http://jsfiddle.net/LSRkE/

只需使用与您的字体颜色形成鲜明对比的透明度即可。然后，您可以降低alpha-channel值，以便背景中的图像足够可见。

相关答案https://stackoverflow.com/a/5135033/953684

CSS - 如何使字体可以读取任何颜色？

3 个答案: