2

我网站上的一些元素显示完美，而相同字体的其他元素看起来颗粒状和波涛汹涌。我不知道为什么，因为我以相同的方式指定样式。

这是我的网站：

http://violetoeuvre.com/

侧边栏导航（我、关于、写联系人）完全没问题，而段落、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 上，字母像我想要的那样接触白色。

是什么导致了这些差异？

谢谢。

4

4 回答 4

2

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

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

检查这个W3 学校，他们定义了 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链接的字体粗细属性是您为其他链接定义的两倍，因此标签可能就是这种情况，但我没有看到任何其他显着差异

于 2013-04-10T20:10:37.417 回答
1

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

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

搜索 Playfair：

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

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

于 2013-04-11T16:14:35.110 回答
0

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

于 2014-08-13T21:38:32.460 回答
0

据我所见，IE 比 woff 更喜欢 ttf 格式，并且特定的导出是错误的。我只是用字体松鼠下载了谷歌字体 mercurial repo 任何转换后的原始（otf）文件，现在它可以工作了。

于 2015-05-13T03:31:36.600 回答