Question

出于某种原因，以下两个代码段在Mac OS X上正确显示，但在Windows上完全被忽略，即字体恢复为具有默认大小和边距的Times New Roman。知道为什么会这样吗？

body {
    font-family: "Helvetica Neue", "Lucida Grande", "Sans serif";
}

#div h1, p {
    margin: 0px;
    font-size: 14px;
    color: #333;
}

Answer 1

它是带有短划线的sans-serif。前两种字体可能没有安装在Windows PC上（我没有它们）。

Answer 2

尝试这样的事情：

font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, sans-serif;

Answer 3

根据font-family属性，计算机试图找到字体Helvetica Neue，Lucida Grande和Sans serif。

但是，PC没有安装Helvetica Neue或Lucida Grande字体，并且找不到后备字体Sans serif，因为浏览器默认为sans-serif，一个字，没有引号。

作为建议，您应该尝试添加更多可以在Windows机器上找到的无衬线字体，例如Lucida Sans，因此它看起来不像可怕的默认sans-serif字体Arial

您的边距和字体大小应该再次有效，但我建议您将font-size: 14px;更改为font-size: 1em;或font-size: 100%;，以允许用户在不破坏布局的情况下缩放字体。

这是你的修复：

body {
    font-family: "Helvetica Neue", "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif;
}

#div h1, p {
    margin: 0;
    font-size: 1em;
    color: #333;
}

CSS font-family在Windows和Mac OS X上的显示方式不同

3 个答案: