-1

我正在开发这个网站，我在其中使用 CSS 来设置菜单按钮的样式。

它们在 Windows 上看起来都不错，但是当我在 OS X 上试用它们时，它们呈现错误。更奇怪的是，它们在一个页面上显示得很好，但 [在我看来] 在另一个页面上却不太好：

字体呈现模糊：
字体呈现模糊

字体以“瘦”模式呈现：
字体呈现在

此外，我发现如果我将鼠标悬停在一个元素（即徽标）上，该元素（即徽标）在悬停时应用了 CSS3 过渡，则模糊渲染的字体会变成skinny，但是当 CSS3 动画结束时，它们会恢复模糊渲染。

原因中的 CSS 转换：

.logo {
    float: left;
    margin-left: 0px;

    -moz-transition: all 0.3s ease-out;  /* FF4+ */
    -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
    transition: all 0.3s ease-out;

    -webkit-transform: rotate(0deg);
}

.logo:hover {
    -moz-transition: all 0.3s ease-out;  /* FF4+ */
    -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
    transition: all 0.3s ease-out;  

    -moz-transform: rotate(-3deg) scale(1);  /* FF3.5+ */
    -o-transform: rotate(-3deg) scale(1);  /* Opera 10.5 */
    -webkit-transform: rotate(-3deg) scale(1);  /* Saf3.1+, Chrome */
    transform: rotate(-3deg) scale(1);  

    zoom: 1;
}

你可以在这里观察到这种现象：http: //pote.ca。

帮助？请？
提前致谢！:)

更新：

我verdana用于菜单项，另一种字体用于// bun venit消息。

另一个看起来不太好的字体示例是 Google 分析页面上的菜单：

在此处输入图像描述

4

1 回答 1

1

这并没有“糟糕”地渲染，它使用了与 Windows 完全不同的字体渲染策略。OS X 倾向于更好地保留字符的原始形状，而 Windows 则试图将字符推入像素网格。结果看起来不同，而不是“更糟”。是的，您需要在设计中考虑到这一点。

作为参考，请参阅仔细查看字体渲染，编码恐怖：Apple 的字体渲染有什么问题？等等

于 2012-12-06T12:28:59.867 回答