Question

我网站上的一些元素显示完美，而同一字体的其他元素看起来有颗粒感和波涛汹涌。我无法弄清楚为什么我以同样的方式指定样式。

这是我的网站：

侧栏导航（我，关于，写作联系人）完全没问题，而段落，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

我认为你应该从font-family标签移动font-size属性并添加它

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

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

浏览器的行为与css有所不同，有些人不适应错误

修改您可以通过放置大多数具有相同样式的选择器来避免重复代码，然后您可以覆盖该样式。对于前

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 2

我很困惑为什么Playfair Display在我的标题和段落中出现颗粒感，但不在我的侧边栏导航中。

经过一番挫折之后，我意识到字体在某种（小）字体上看起来很糟糕。

搜索Playfair：

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

正如你所看到的，Normal 400看起来很奇怪，但是在更大，粗体或斜体的样式中，它看起来很好。唯一要做的就是为较小的款式选择类似的字体，所以我使用Jacques Francois。

Answer 3

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

Answer 4

据我所知，IE更倾向于使用wt格式的ttf格式，而且特定的导出是错误的。我只是用字体松鼠下载了google font mercurial repo任何转换后的原始（otf）文件，现在它可以正常工作。

字体未统一显示

4 个答案: