html - 如何使我的 HTML 'font' 边缘颜色与 css 上的背景匹配？

Question

如何使我的 HTML“字体”边缘与 css 上的背景相匹配？

我的意思是让“粗字体”(字体大小)的颜色逐像素变化以匹配背景。

例如白色字体和黑色背景。如何使字体边缘颜色平滑/渐变与背景匹配？

例如

<div style="font-size: 24px; weight: 600; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;">

MY TITLE n LOGO

</div>

显然这可以在 photoshop 中作为图像来完成，但这会打破我的带宽规则。我希望它纯粹是 HTML n CSS。有可能的？与“抗锯齿”有什么关系吗？什么是抗锯齿？懒惰模式

Answer 1

您可能想要做的(有点不清楚的问题)是转换模糊阴影到没有偏移的文本。您可以通过使用 text-shadow 将 CSS 样式应用于您的文本来做到这一点像这样的属性:

{text-shadow:0 0 2px #888;}

或者在你的情况下:

<div style='font-size: 24px; 
            weight: 600; 
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
            text-shadow:0 0 2px #888;'>
</div>

> Here's a Fiddle

---

您可以找到此 Text-Shadow 的引用 的 CSS 属性 w3schools.com 。它需要四个参数:

• h-shadow :必需。水平阴影的位置。允许负值
• v-shadow :必需。垂直阴影的位置。允许负值
• blur :可选。模糊距离
• color :可选。阴影的颜色。

---

请注意，低于 IE10 的 Internet Explorer 浏览器不支持此属性。

对于 IE 浏览器，您可以对文本应用模糊过滤器:

filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=1);

或发光滤镜:

filter:progid:DXImageTransform.Microsoft.Glow(Color=gray,Strength=1);

或两者兼而有之:

filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=1)
        progid:DXImageTransform.Microsoft.Glow(Color=gray,Strength=1);

IE 静态过滤器引用可以在 http://msdn.microsoft.com 找到.