Question

我的“开发中”网站上有一个奇怪的问题：http://www.cphrecmedia.dk/musikdk/stage/

H1-h6字体只是“sans-serif”，但通常在Chrome中它显示另一种字体（屏幕截图：http://cl.ly/image/260B0H0l1w0C）。当鼠标悬停在导航栏上时，它会变为右侧字体。仅供参考，它应该是这样的：http://cl.ly/image/442l071M3N1B

用于字体的代码是：

.nm li a {
    float: left;
    font-family: sans-serif;
    height:22px;
    padding: 12px 14px 7px 14px;
    color:@white;
    font-size: 12px;
    line-height: 20px;
}

我主要使用Chrome进行开发，因此我不确定其他浏览器是否存在该问题。你以前有没有人见过这个问题？

Answer 1

'sans-serif'不是字体名称，而是字体系列规范。

使用sans-serif字体名称，例如“Arial”或“Verdana”，否则您将获得意外结果（浏览器可能会将您的字体替换为普通字体）。

Answer 2

尝试使用自定义字体方法，方法是下载字体并将其保存在字体文件夹中。

示例：

@font-face {
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
    ,url('Sansation_Light.eot'); /* IE9 */
}

div
{ font-family:myFirstFont; }

Answer 3

尝试使用谷歌的自定义网络字体：

http://www.google.com/fonts

选择一种字体并使用三种方法之一，我更喜欢CSS方法。

示例：

@import url(http://fonts.googleapis.com/css?family=Roboto);

在CSS中导入此内容并将其用于文本：font-family: 'Roboto', sans-serif;

使用“Sans-Serif”缓慢渲染

3 个答案: