文本在（几乎）相同的操作系统上以相同的浏览器定位

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计算机，一台是Home Premium，另一台是Enterprise，它们为同一版本的Chrome生成不同的结果（Firefox也有不一致性）。在企业计算机上，文本更靠近框的底部，而在Home Premium计算机上，文本更接近顶部。

我记得曾经读过像Chrome和Firefox这样的浏览器有时会使用OS系统设置字体，但是我无法弄清楚是什么导致这种情况，也不知道如何解决它。我最终希望文本垂直居中并在矩形内部右对齐，并且可以为每台计算机拉出它，但不能同时将它们拉开。

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

我意识到我可以用一个图像来解决这个问题（我可能）但我真的很想知道这里发生了什么。

编辑：我在其他计算机上试用过，问题仍然存在。 Web字体以下述方式引用。还有其他想法吗？我倾向于这是一个系统设置问题，但我无法找到它的设置。

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 */
}