1

我正在使用一些字体图标来代表我正在构建的网站上的 twitter、Facebook 和 rss，它们看起来很棒。它们会在悬停、激活和聚焦时更改为适当的颜色，并且在 Firefox 和 Opera 上看起来很棒。

我的问题是 Mac 上的 Safari 和 Chrome（所以我假设是 webkit）。悬停时，您可以在一个或两个图标的边缘看到一点点白色。

我已经尝试将链接/访问的颜色更改为绿色，您可以在悬停时看到一点绿色，所以我知道这是所看到的默认颜色。

在此处查看页脚左侧的图标：http: //tempertemper.net/index2

以下是我拍摄的一些屏幕截图：

在此处输入图像描述

twitter 鸟在背景下看起来不太好，但我仍然需要做一些调整。你可以把它的喙周围的白色弄出来。facebook 徽标显示它的顶部和底部，并在左侧和底部边缘显示 rss 符号。

感谢您的观看，

马丁。

4

3 回答 3

4

我在 Mac 上使用 Univers 字体的 Webkit 遇到了同样的问题。

我通过在我的字体大小属性中设置半像素来解决它：font-size: 18.5px

于 2012-11-09T15:41:48.390 回答
1

我联系了制作字体的小伙子，他建议更改@font-face 请求的顺序，以便 svg 高于 woff 和 ttf 并使它变得更好。然后我调整了字体大小并选择了 4.15em，它在 Safari 或 Mac 版 Chrome 中没有显示白边。4.1、4.2、4.3、4.4等均呈现轻微的白线。

所以它是固定的，但我不知道为什么！

感谢所有人的关注，如果你们中的任何人都知道为什么会发生这种情况，但我很想知道一些字体大小:)

于 2012-08-18T20:41:49.390 回答
0

Add this to anchor style:

.social a:link, .social a:visited {
    color: white;
    border-bottom: none;
    text-decoration: none;
}
于 2012-08-17T13:49:18.930 回答