Chrome与Firefox，IE和Safari浏览器的字体不同 [英] The same font looks different in Chrome vs. Firefox, IE and Safari

问题描述

这个问题与在不同浏览器中渲染字体有关。我很惊讶地看到这个问题只在Chrome中复制。它可以在Firefox，IE8，Safari甚至IE6中正常工作。

这里是示例。

 < div style =position：absolute; bottom：2px; padding-top：1px; width：100％; > 
< span style =float：left;> 
< div id =saveCustomizationButtonclass =smallBlueButton> 
< span> Speichern< / span> 
< / div> 
< / span> 
< span style =float：right; padding-right：1px;> 
< div id =downloadOrPrintButtonclass =smallGreenButton smallGreenButtonSmallLetterSpace> 
< span>下载或打印< / 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会提出一个解决方案。或者我需要实现一些特定于浏览器的行为。

等待您的意见。提前致谢。 文本呈现不同浏览器。有时候不管有多少我们试图改变渲染，我们不会得到它。如果你想要阅读这篇文章 。它不提供解决方案（我不认为有这个问题），但它突出了差异。

The issue is connected with rendering font in different browsers. I was surprised to see the issue is reproduced only in Chrome. It works fine in Firefox, IE8, Safari and even IE6.

Here comes the sample.

And here comes the code itself:

<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;
}

That is it. I've read about css reset, and have tried it. Any miracle -nothing's changed. Another way I was considered to use was fixing the width of the container tag. But due to the necessity to maintain multiple localisations I can't use this approach.

I hope smb will propose a solution. Or I'll need to implement some browser-specific behavior.

Waiting for your comments. Thanks in advance.

解决方案

Text rendering does differ from browser to browser.Sometimes no matter how much we try to change the rendering, we won't get it. You can read this article if you want. It does not provide a solution(I don't think there is one) to this problem but it highlights the differences.

这篇关于Chrome与Firefox，IE和Safari浏览器的字体不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！