Question

如何让我的HTML'字体'边缘与css上的背景匹配？

我的意思是让'胖字体'（字体大小）的颜色逐像素地改变以匹配背景。

如白色字体n黑色背景。如何使字体边缘颜色平滑/逐渐改变与背景的匹配？

e.g。

<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>

<强>＆GT; Here's a Fiddle为此。

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

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);

可以在 http://msdn.microsoft.com找到IE静态过滤器参考。

Answer 2

像这样编辑

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

如何使我的HTML'字体'边缘颜色与css上的背景匹配？

2 个答案: