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

Posted 2023-03-06

【中文标题】比较 chrome 和 Firefox 的字体大小问题

【英文标题】：Font-size issues comparing chrome and Firefox

【发布时间】：2011-06-21 10:49:07

【问题描述】：

我建立了一个网站，问题是，chrome 显示 font-size 1px 比 Firefox 大。我尝试了几种方法来匹配字体大小，在 px 中指定它，在 % 中将 body 设置为 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 上没有其他 font-size 声明，可以在我发布的链接中查看源代码。

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

【参考方案1】：

我建议您使用像 YUI 中的 CSS reset。这将使您的页面在所有浏览器中更加更加一致，包括字体渲染。它与 IE 和其他浏览器有最大的不同，但它消除了各种不一致。

【讨论】：

这是必不可少的。每个人都应该一直使用它。

它会改变你的生活，伙计。比如第一次发现 FireBug，学习 jQuery，或者第一次吃玉米片。

这确实很有帮助，但是，即使添加了这个 css 重置，它仍然显示得更大。我想我会使用 php useragent 在每个浏览器上将字体设置为相同的大小。

重置 CSS 的直接 URL 是：github.com/yui/yui2/blob/master/src/reset/css/reset.css（当 OP 的评论是它不能解决问题时，不知道为什么这个答案会打勾！）

这是必不可少的，但对解决问题没有帮助。

【参考方案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 conditional comments）

这对我有用。但一个副作用是还重新缩放相对大小的任何非文本元素，这可能是可取的，也可能不是可取的。

【参考方案3】：

<script>

     if(navigator.userAgent.indexOf("Chrome") != -1 ) 
    
         var fontsize = "<style>bodyfont-size: 125%;</style>";
    
    else if(navigator.userAgent.indexOf("Opera") != -1 )
    
         var fontsize = "<style>bodyfont-size: 100%;</style>";
    
    else if(navigator.userAgent.indexOf("Firefox") != -1 ) 
    
         var fontsize = "<style>bodyfont-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>

【参考方案4】：

在这里工作正常：

Chrome 9.0：

Firefox 4.0 测试版 10：

【讨论】：

是的，我现在修好了，我使用了一些 js 来检测 chrome 并在 1px 上进行补偿。

【参考方案5】：

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

编辑：重新阅读，我看到您已经尝试将高度设置为像素。没有任何线索，因为我没有在这里安装 Chrome 进行测试。 :(

【参考方案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;

这对我有用

【参考方案7】：

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