0

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

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

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

例如

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

MY TITLE n LOGO

</div>

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

4

2 回答 2

2

您可能想要做的（有点不清楚的问题）是给没有 offset的文本投下模糊的阴影。您可以通过使用如下属性将 CSS 样式应用于文本来做到这一点：text-shadow

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

>这是一个小提琴。

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

  • 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 静态过滤器参考。

于 2013-01-28T06:19:55.720 回答
0

像这样编辑你

<div style='font-size: 24px; weight: 600; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;'>
于 2013-01-28T06:18:40.097 回答