Html CSS - 如何使字体在任何颜色上都可读？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23968961/
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 - How can I make a font readable over any color?
提问by Nikita240
Assuming I have a set font color that I must maintain, and that it overlays content that can be of any color, how can I make sure the font is readable no matter what it's overlaying?
假设我有一个必须保持的设置字体颜色，并且它覆盖了可以是任何颜色的内容，我如何确保字体无论覆盖什么都是可读的？
Here is a jsFiddle to demonstrate the effect I am trying to describe. http://jsfiddle.net/4AUDr/
这是一个 jsFiddle 来演示我试图描述的效果。 http://jsfiddle.net/4AUDr/
#overlay
{
position: relative;
top: -150px;
color: #860101;
}
Meme captions utilize white text with a black outline to make it readable over any hypothetical meme image, however I don't think there is a cross-browser compatible CSS only method of achieving that, and it would potentially look quite horrible with smaller fonts.
Meme 标题利用带有黑色轮廓的白色文本使其在任何假设的 meme 图像上可读，但是我认为没有跨浏览器兼容的 CSS 唯一方法来实现这一点，并且使用较小的字体可能看起来很糟糕。
What solutions are there to this problem?
这个问题有哪些解决方案？
采纳答案by kamituel
You can experiment with text-shadowproperty (MDN doc), for instance:
您可以尝试使用text-shadow属性（MDN doc），例如：
text-shadow: white 0px 0px 10px;
(jsFiddle)
( jsFiddle)
It's supported in IE10. For IE9, you can use proprietary Internet Explorer filters as per this answer.
它在 IE10 中受支持。对于 IE9，您可以根据此答案使用专有的 Internet Explorer 过滤器。
回答by George Dimitriadis
While text-shadow is nice, it doesn't actually give the result you want. A shadow is a shadow and what you need to have for most readable text is a "text border". Unfortunately. there is no such thing as text-border in css, but we can make one !
虽然 text-shadow 很好，但它实际上并没有给出你想要的结果。阴影就是阴影，大多数可读文本需要的是“文本边框”。很遗憾。css中没有text-border这样的东西，但我们可以做一个！
I am surprised by how much unpopular multiple shadows are. This is a case where by multiple shadows you can do miracles :
我对不受欢迎的多重阴影感到惊讶。在这种情况下，您可以通过多个阴影创造奇迹：
CSS
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;
}
This style will simply add a thin shadow (as thin as 7% of your actual font-size) around your text (up, down, left, right).
这种样式只会在文本周围（上、下、左、右）添加一个细阴影（薄至实际字体大小的 7%）。
But are four shadows enough ? Maybe you can get a better result with eight ? It looks like the answer is yes, makes sense to me, but it could also be that we are overkilling things here. Note that in this case I also decreased each shadow's size :
但是四个影子就够了吗？也许你可以用八获得更好的结果？看起来答案是肯定的，对我来说是有道理的，但也可能是我们在这里过度杀戮。请注意，在这种情况下，我还减小了每个阴影的大小：
CSS
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;
}
Then in this markup in a colourful background you have a nicely readable text:
然后在这个彩色背景的标记中，你有一个很好读的文本：
HTML
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>
回答by Sharky
You can use the css3 property text-shadow
您可以使用 css3 属性 text-shadow
Warning: Browser compatibility problems (IE9 no support)
警告：浏览器兼容性问题（IE9 不支持）
http://caniuse.com/css-textshadow
http://caniuse.com/css-textshadow
a simple example:
一个简单的例子：
.shadow {text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);}
.shadow {text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);}
If you use white shadow over black fonts, or vice-versa, your text will be readable no matter what is overlaying.
如果您在黑色字体上使用白色阴影，反之亦然，无论叠加什么，您的文本都将是可读的。
Another option is to use a background-colorwith transparency (you may want to apply this to an inline element like a spanor a pinstead of a divbecause background-coloris going to apply to the whole div area even where there is no text)
另一种选择是使用background-color具有透明度的 a （您可能希望将其应用于内联元素，例如 aspan或 ap而不是 adiv因为background-color即使没有文本也将应用于整个 div 区域）
background: rgba(33, 33, 33, .9);
background: rgba(33, 33, 33, .9);
Just use a transparency that contrasts with your font color. Then you can lower the alpha-channelvalue so the image from the background will be visible enough.
只需使用与字体颜色形成对比的透明度即可。然后您可以降低该alpha-channel值，以便背景中的图像足够可见。
Related answer here https://stackoverflow.com/a/5135033/953684
回答by Mambans
I had the same problem with a dynamic background image with white text.
I personally didn't like the look of drop-shadow so I solved it with mix-blend-mode: screen;.
我对带有白色文本的动态背景图像有同样的问题。我个人不喜欢阴影的外观，所以我用mix-blend-mode: screen;.
P.S.: I'm pretty new to programming so I might not know all drawbacks with it.
PS：我对编程很陌生，所以我可能不知道它的所有缺点。
