如何使我的HTML‘字体’边缘颜色与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和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>

> for it.

您可以在上找到此Text-Shadow CSS属性的参考。它需要四个参数：

需要

• h-shadow__：。水平阴影的位置。负值是allowed
• v-shadow__：必需的。垂直阴影的位置。负值是allowed
• blur__：可选的。模糊distance
• 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静态过滤器参考可在.中找到

Answer 2

像这样编辑你的

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