比较 Chrome 和 Firefox 的字体大小问题

Question

我建立了一个网站，问题是，chrome 显示的 font-size 1px 比 Firefox 大。我尝试了几种方法来匹配字体大小，以 px 为单位指定，以 % 为单位将正文设置为 100%，然后将元素设置为 0.875em。这些都不起作用。它仍然在 Chrome 中显示多 1 像素。

这是我用于字体大小的代码：

body {
  font-size: 100%;
}
* {
  margin:0;
  padding:0; 
  text-decoration: none; 
  font-family:helvetica, arial, sans-serif;
}
#geral {
  width:1000px; 
  margin:0 auto; 
  position:relative; 
  font-size:0.875em;
}

#geral 包裹整个网站并且 CSS 上没有其他字体大小声明，可以在我发布的链接中查看源代码。

我想知道是否有办法解决这个问题，或者我是否必须为每个浏览器指定不同的字体大小？

Answer 1

我建议您使用 CSS 重置，例如 YUI 中的重置。它将使您的页面在所有浏览器中更加一致，包括字体渲染。它与 IE 和其他浏览器有最大的区别，但它消除了各种不一致的情况。

Answer 2

Fwiw 在这个日期，我自己最近刚刚了解到，良好的 CSS 编码实践是仅为 HTML 或 BODY 元素定义绝对字体大小，并相对地定义所有其他字体大小，即根据此大小（即使用 em 或 %）。

如果您这样做，您只需从其他浏览器（Gecko、IE 等）中挑选出 webkit 浏览器（Chrome、Safari）即可。因此，例如，您可能已在样式表中定义，

body {
  font-size: 16px;
}

然后在样式表的底部，您可以包含此内容

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  Body {
    font-size: 20px;      
    }
}

（另请参阅Chrome 条件注释）

这对我有用。但一个副作用是也会重新调整相对大小的任何非文本元素，这可能是理想的，也可能不是。

Answer 3

<script>

     if(navigator.userAgent.indexOf("Chrome") != -1 ) 
    {
         var fontsize = "<style>body{font-size: 125%;}</style>";
    }
    else if(navigator.userAgent.indexOf("Opera") != -1 )
    {
         var fontsize = "<style>body{font-size: 100%;}</style>";
    }
    else if(navigator.userAgent.indexOf("Firefox") != -1 ) 
    {
         var fontsize = "<style>body{font-size: 100%;}</style>";
    }
    else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10
    {
         var fontsize = "<style>body {font-size: 100%;}</style>";
    }  
    else 
    {
         var fontsize = "<style>body {font-size: 100%;}</style>";
    }
    </script>

<script>document.writeln(fontsize);</script>

Answer 4

在这里工作正常：

Chrome 9.0：

Firefox 4.0 beta 10：

Answer 5

em 是可缩放的，而 px 则不可缩放。将字体设置为定义的 px 大小，应该没问题。 em 在某些情况下可能是理想的，但如果您担心 1px，那么您应该设置严格的像素大小。

编辑：只需重读，我发现您已经尝试将高度设置为像素。没有任何线索，因为我没有在这里安装 Chrome 来测试。 :(

Answer 6

如果您有要打印的网页，

添加 css

<link rel="stylesheet" type="text/css" href="report.css" media="print" />

请在 css 文件中

body {
    padding: 3px;
    margin: 0.5px;
    background-position: center;
    color: #000000;
    background: #ffffff;
    font-family: Arial;
    font-size: 13pt;
}

，这对我有用

Answer 7

我也遇到过这个问题，我决定尽可能使用 font-size:small （或 x-small 等）。这为您提供了基本的可缩放字体大小范围，而无需寻找繁琐的 css 或搞乱 JS。它适用于 IE、FF 和 Chrome。

Answer 8

当我使用这个 css 时，我在 Firefox 和 Chrome 之间的渲染方面获得了足够好的相似性（它可以工作，因为 Firefox 尚未实现“缩放”）：

body {zoom: .7}

但它仍然不是像素完美的。

请注意，我在任何地方都使用“rem”单位而不是“px”单位，因为当我在页面上使用多种字体时，效果更好。

请注意，我已将 Windows 显示分辨率设置为 150%，以弥补我视力不佳的问题。当我将其设置回100%时，尺寸不同的问题仍然存在。所以这不是问题。

我确信没有标准规定页面在不同浏览器上必须看起来相同，但使用“缩放”似乎在这方面有所帮助。

除非这个比例因子问题是由于我的计算机配置错误造成的。