0

我有两个版本的网页，每个版本都加载到同一个 chrome 实例的单独选项卡中。

我有一个 h1 标签，在每个版本上显示略有不同 - 一个显示好像它是font-weight: 300;，另一个显示font-weight: 400;，尽管倾倒每个版本的完整计算样式并将它们一起比较不会产生相关差异！怎么会这样？

这是差异：

@@ -79 +79 @@
--webkit-locale: auto;
+-webkit-locale: en;
@@ -101 +101 @@
--webkit-perspective-origin: 60.25px 18px;
+-webkit-perspective-origin: 56.453125px 18px;
@@ -117 +117 @@
--webkit-transform-origin: 60.25px 18px;
+-webkit-transform-origin: 56.453125px 18px;
@@ -248 +248 @@
-text-align: center;
+text-align: start;
@@ -267 +267 @@
-width: 120.515625px;
+width: 112.921875px;

请注意，字体粗细没有区别。而且我假设宽度的差异可以通过字体粗细的差异来解释，而不是导致差异。那么为什么一个显示比另一个更粗呢？

编辑：html很简单：

<div class="logo float-left">
    <a href="#top">
        <h1>TEXTHERE.<span>ly</span></h1>
    </a>
</div>

我已经包含了上面唯一不同的计算 css。

4

1 回答 1

0

事实证明，这是两个页面之间的相关差异：

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

获取此样式表

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}

和

@import url(http://fonts.googleapis.com/css?family=Lato|Open+Sans:400,300);

拿来这个

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}

我仍然不明白为什么 Chrome 和 Firefox 检查器中的计算样式会出现相同的结果。

于 2013-08-02T03:07:54.897 回答