Chrome与Firefox,IE和Safari中的字体相同

时间:2013-01-18 14:41:20

标签: css google-chrome firefox safari webfonts

该问题与不同浏览器中的渲染字体有关。我很惊讶地看到该问题仅在Chrome中重现。它在Firefox,IE8,Safari甚至IE6中都能正常工作。

以下是样本。

enter image description here

以下是代码本身:

<div style="position:absolute;bottom:2px;padding-top: 1px;width:100%;">
   <span style="float:left;">
      <div id="saveCustomizationButton" class="smallBlueButton">
         <span>Speichern</span>
      </div>
   </span>
   <span style="float:right;padding-right:1px;">
      <div id="downloadOrPrintButton" class="smallGreenButton smallGreenButtonSmallLetterSpace">
         <span>Downloaden oder drucken</span>
      </div>
   </span>
</div>

div.smallGreenButton span, div.smallGreenButton a {
    display: block;
    line-height: 14px;
    padding: 1px 7px 2px 13px;
}
div.smallGreenButton {
    font-family: arial,sans-serif;
    font-size: 12px;
    font-weight: 600;
}
div.smallBlueButton {
    font-family: arial,sans-serif;
    font-size: 12px;
    font-weight: 600;
}

就是这样。我已经阅读了有关css重置的信息,并尝试过了。任何奇迹 - 没有任何改变。我考虑使用的另一种方法是修复容器标签的宽度。但由于必须保持多个本地化,我不能使用这种方法。

我希望smb能提出解决方案。或者我需要实现一些特定于浏览器的行为。

等待你的评论。提前谢谢。

1 个答案:

答案 0 :(得分:3)

文本呈现在浏览器与浏览器之间存在差异。有时候,无论我们尝试多少次更改渲染,我们都无法获得它。如果需要,您可以阅读this文章。它没有为这个问题提供解决方案(我认为没有),但它强调了差异。