css - 文本在(几乎)相同操作系统的相同浏览器中的位置不同

Question

我真的被难住了。我所拥有的是一个样式化为矩形的 div，其中包含作为页面主要标题的文本。相关代码如下:

HTML:

<div id="rectangle">
<h1>SIN</h1>
</div>

CSS:

h1 {
        text-align:right
        font-family:Buenard;
        font-size:120px;
        font-weight:normal;
        color:#FFFFFF;
        position:absolute;
        width:98%;
        line-height:109px;
        border:1px solid white; /*for debugging purposes*/
}

#rectangle {
        position:relative;
        width:237px;
        height:109px;
        background:#6F0000;
        margin-top:40px;
}

让我发疯的问题是我有两台不同的 Windows 7 计算机，一台家庭高级版和另一台企业版，它们对相同版本的 Chrome 产生不同的结果(Firefox 也有不一致)。在 Enterprise 计算机上，文本更靠近框的底部，而在 Home Premium 计算机上，文本更靠近顶部。

我记得读过 Chrome 和 Firefox 等浏览器有时会使用操作系统的字体设置，但我不知道是什么原因造成的，也不知道如何补救。我最终希望文本在矩形内垂直居中并右对齐，并且可以为每台计算机都实现这一点，但不能同时为两台计算机实现。

我相信我尝试过的 Mac OSX 计算机与 Windows Enterprise 计算机具有相同的行为(但我不完全确定)，所以这可能只是我个人计算机上的设置。

我知道我可以只使用图像来解决这个问题(我可能会)，但我真的很想知道这里发生了什么。

编辑:我在我的另一台电脑上试过了，问题仍然存在。以下述方式引用网络字体。还有其他想法吗？我的倾向是这是一个系统设置问题，但我找不到那是什么设置。

Answer 1

它很可能是您使用的字体，因为其中一台计算机上可能没有安装它。我建议先尝试不同的字体系列。

h1 { 
  font-family: san-serif;
}

如果您想使用该字体，您首先必须确定您是否拥有分发它的合法权利，然后您必须让您网站的每位访问者下载并安装该字体，以便您的网站正常显示。

如果您想要自定义字体，我建议您查看网络字体。 Google 网络字体只是此处的示例之一:http://www.google.com/fonts/

编辑:

除了确保，感谢@w3d，你的字体可以正常工作，尽管不是你引用它的方式。您需要将其设为网络字体引用，以便浏览器知道转到网络资源，否则将改用后备字体。

根据您添加的图像，行高可能是您的问题，请尝试将其删除。如果您需要将该文本从其边界上移开，则用 span 包裹它并应用一些样式。

HTML

<span class="elevate">SIN</span>

CSS

span.elevate {
  display: inline-block; /* to allow applying margins and padding */
  margin: 2px 0; /* puts 2px worth of margin below and above text */
}