文本在（几乎）相同操作系统上的相同浏览器中位置不同

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，您的字体将可以正常工作，尽管不是您引用它的方式。您需要将其设置为 webfont 引用，以便浏览器知道转到 web 资源，否则将使用备用字体。

根据您添加的图像，行高可能是您的问题，请尝试将其删除。如果您需要将该文本提升到超出其边界的位置，请使用 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 */
}