firefox 和 chrome 字体渲染的细微差别答案

【问题标题】：a minor difference of font rendering in firefox and chromefirefox 和 chrome 字体渲染的细微差别
【发布时间】：2016-11-22 12:45:00
【问题描述】：

我在 Firefox 和 chrome 中的字体渲染有一个奇怪的问题。在 chrome 中，字体似乎有点大（虽然不是很明显）。因此，它出现在另一条线上。截图附在下面（第一张图片是chrome，第二张是firefox）。

我在页面中使用 bootstrap 3.3.6、font-awesome 4.6.1、jquery-1.11.2.min.js 和 prettyphoto。

我正在使用字体大小：16px（我也尝试过 1em），字体粗细：400，文本渲染：优化易读性，行高：1.6 用于“p”标签

和 font-family:Arial,Helvetica,sans-serif 和 font-style :normal 继承自'body'

3 列是 bootstrap 的 col-md-4，firebug 和开发者工具栏中的布局显示它的宽度应该是 310px（带有 15px 填充）。

CSS 是这样的

body{ color:#333;cursor:default;font-family:Arial,Helvetica,sans-serif;font-style:normal;font-weight:400;line-height:22px;position:relative;margin:0; background:#153b5d url(../img/bg.png) repeat-x;}

p{font-family:inherit;font-size:1em;font-weight:400;line-height:1.6;text-rendering:optimizelegibility;}

谁能告诉我我做错了什么。谢谢。

编辑：我试图把它作为一个 sn-p。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<style>
  *,
  a:hover,
  a:active,
  a:focus {
    outline: 0;
  }
  body {
    color: #333;
    cursor: default;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    position: relative;
    margin: 0;
    background: #153b5d url(../img/bg.png) repeat-x;
    font-size: 16px;
  }
  p {} .container {
    background: #FFF;
    max-width: 1020px;
  }
</style>


<div class="container">
  <div class="row">
    <div class="col-md-4">
      <p>For a long lasting freshness feeling; Removes stubborn odour from textiles.</p>
    </div>
    <div class="col-md-4">
      <p>Unpretty deo and sweat stains on your shirt?
        <br>Now Dr. Beckmann stain spray deo &amp; sweat provides a way out.</p>
    </div>
    <div class="col-md-4">
      <p>Every stain is different; For each stain the perfect specialist.</p>
    </div>
  </div>
</div>

【问题讨论】：

你没有做错任何事情，不同的浏览器呈现不同的字体，它们在各个方面总是存在细微的差异。请看看这个其他问题，它可能会有所帮助：stackoverflow.com/questions/4899792/…
而那个细微的差别就扼杀了我的布局。我给 div 指定了最小高度，但在 chrome 中，布局比最小高度高
请马修也发布您的 HTML。最好用 HTML / CSS 重现问题
我已经添加了 sn-p。您可以在 chrome 和 firefox 中进行比较。正如@Forty 所说，我可能不得不忍受这一点。只需增加我的最小高度并节省一些时间:)
我个人会做的是使字体大小稍微小一点，以便两者都适合，或者使容器更大（10-20px 可能就足够了）。如果您首先使用 FF，提醒自己在此类情况下为 chrome 留出更多空间是避免遇到此问题的简单方法。

标签： html css google-chrome firefox fonts

【解决方案1】：

添加为答案，因为我无法发表评论 - 但您是否检查过两个浏览器是否处于相同的“缩放级别”（mac 上的 cmd + 0）？

【讨论】：

我已经在 OSX 上的 Chrome 和 Firefox 中对此进行了测试，两种浏览器的行为方式似乎相同 - 根据您的 chrome 示例
我在 Windows 7 中。缩放级别为 100%。也许其他windows用户可以全屏查看上面的sn-p并确认@JT91。
@Mathew 如果我删除容器上的最大宽度值并将屏幕大小调整到 1200 像素以下（但是这两个浏览器之间是一致的），我可以重新创建问题 - 你能确认这是否是案子？您的屏幕截图中的容器大小似乎不同？
codepen.io/anon/pen/ZOAmVW @Mathew 这是否重现了您的问题？

【解决方案2】：

在 BODY 元素中设置默认字体。 P 会默认继承字体设置。

您使用的是 normalize.css 吗？如果您不打算在项目中包含一个。每个浏览器的基本 CSS 值略有不同。 Normalize 将设置基本 CSS 值，因此它们在所有浏览器中都是相似的。

我会尝试这样的：

body { 
    color:#333;
    cursor:default;
    font-family:Arial,Helvetica,sans-serif;
    font-style:normal;
    font-weight:400;
    font-size: 16px;
    position:relative;
    margin:0; 
    background:#153b5d url(../img/bg.png) repeat-x;
    text-rendering:optimizelegibility;
}

p {

}

【讨论】：

重置肯定有用，但这不是chrome字体变大的原因，也不是解决办法。修复它的最佳选择是在不影响 firefox 的情况下缩小 chrome 字体。
这将是一个完整的黑客攻击。不同的浏览器的渲染输出略有不同，因此我们可以将其归结为这一点。如果它超出了渲染器，那么规范化 CSS 是让它“接近”像素完美的最佳选择。根据浏览器类型更改字体大小是一种倒退的方法。
关于reset.css，我认为默认情况下这是在引导程序中完成的。那正确吗？。顺便说一句，我尝试了@Lowkase 的答案，但没有成功。
如果差异让他如此困扰，这是一个选择。重置不会改变大小差异。当我创建一个网站时，我只是留出比考虑到这一点所需的空间稍大的空间。
我同意你的重置和从你的 cmets 到它可能是渲染器的问题。尽管我不会向他建议让浏览器特定的字体大小...该路径最终会导致代码库维护起来非常痛苦。

【解决方案3】：

我觉得试图解决这个问题是没有用的。 http://codepen.io/anon/pen/dXdwmQ 的简单笔显示字体的呈现方式不同。即使使用 reset.css。我正在检查 Windows 7。我认为 mac 可以正确呈现它。

<link href="httpshttps://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet" />
<style>
  body {
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    background:#fff;
    font-size: 16px;
  }
</style>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

至少现在很高兴知道。经验教训:)

【讨论】：