字体显示不统一

Question

我的网站上的一些元素显示得很完美，而同一字体的其他元素看起来颗粒状的，起伏不定。我不知道为什么，因为我用同样的方式指定了样式。

这是我的网站：

http://violetoeuvre.com/

侧边栏导航(me，about，while )完全没有问题，而段落、h2和页脚样式是颗粒状的，看起来就像是同一字体的粗略版本。

CSS：

    /* Fonts */
    @import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic);

时髦的风格：

h2 {
        font-family: 'Playfair Display', sans-serif, 20px;
        font-weight: 100;
        line-height: 2em;
        color: #000000;
        letter-spacing: -1px;
        margin: 0; 
}

h3 {
        font-family: 'Playfair Display', sans-serif, 12px;
        font-weight: 100;
        line-height: 2em;
        color: #000000;
        letter-spacing: -1px;
        margin: 0; 

}

#foot a:link {
        font-family: 'Playfair Display', sans-serif;
        font-size: 15px;
        font-weight: 100;
        color:#000; 
        text-decoration: none; 
        letter-spacing:0.2em;
}

这些功能运行良好：

#emma_home a:link{
        font-family: 'Playfair Display', serif;
        font-size: 75px;
        font-weight: 200; 
        color:rgba(255,255,255,1);
        text-decoration: none;
        letter-spacing:-4px;
    }
#nav_menu a:link{
        font-family: 'Playfair Display', serif;
        font-size: 30px;
        font-weight: 100; 
        color:rgba (255,255,255,1);
        text-decoration: none; 
        text-align: center;
        letter-spacing:0.2em;
}

#side_wrapper_text a:link{
        font-family: 'Playfair Display', sans-serif;
        font-size: 32px;
        font-style: italic;
        font-weight: 100; 
        color:#000000;;
        text-decoration: none; 
        text-align: right;
        letter-spacing:0.2em;

}

此外，在PC上，顶部的Emma和导航(写作、博客、联系人)大约在黑线上方20像素，但在我的Mac上，字母按我所希望的那样触摸白色。

这些差异是怎么回事？？

谢谢。

Answer 1

我搞不懂为什么Playfair在我的标题和段落中出现颗粒状，而在我的侧边栏导航中却没有。

在经历了一些挫折之后，我意识到这种字体在某种(小)字体下看起来很糟糕。

搜索Playfair：

http://www.google.com/fonts/

正如你所看到的，普通的400看起来非常奇怪，但是在更大的，粗体或斜体的样式下，它看起来很好。唯一能做的就是为较小的样式选择一个类似的字体，所以我使用的是雅克·弗朗索瓦。

Answer 2

我认为您应该将font-size属性从font-family标记中移出并添加它

font-family: sans-serif;
font-size : 12px;

检查这个W3 Schools，他们定义了两个属性

浏览器的行为与css不同，一些浏览器适应了错误，另一些则没有

编辑你可以通过放置具有相同样式的选择器来避免重复的代码，然后你可以覆盖该样式。对于ex

h2,h3 {
    font-family: 'Playfair Display', sans-serif;
    font-size : 20px;
    font-weight: 100;
    line-height: 2em;
    color: #000000;
    letter-spacing: -1px;
    margin: 0; 
}
h3 {
    font-size: 12px;
}

我看到您的a链接的字体粗细属性是您为其他链接定义的字体粗细的两倍，因此这可能是标签的情况，但我看不到任何其他显着差异

Answer 3

我是一名设计师，主要在网页上工作，但偶尔也会印刷。我认为你的问题实际上可能是Playfair字体本身的问题，我刚刚发现它在PC上显示时缺少某些字体样式( may看起来很好)。在浪费更多的时间之前，我会用另一种字体进行测试。