Question

我在firefox和chrome中使用字体渲染时遇到了一个奇怪的问题。在chrome中，字体似乎略大（虽然不是那么明显）。因为它来自另一条线。屏幕截图如下（第一张图片是chrome，第二张是firefox）。

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

我正在使用font-size：16px（我也试过1em），font-weight：400，text-rendering：optimizelegibility，line-height：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;}

有人可以告诉我我做错了什么。感谢。

编辑：我正在尝试将其作为一个片段。

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

Answer 1

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

Answer 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 {

}

Answer 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>

至少现在很高兴知道。获得的经验：）

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

3 个答案: