1

我知道 Chrome 和 Firefox（Windows，两者）之间存在浏览器渲染不一致。但是我看到了一个奇怪的错误，涉及@font-face 和 gooogle-fonts 在 Chrome 中将字体向下移动了大约 10 像素。

这是说明问题的图像。我已经突出显示了文本，以便您可以看到转变：

Chrome 和 Firefox 的屏幕截图

为了清楚起见，这是CSS：

.primary-menu li a,
.primary-menu li a:visited {
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    padding-right: 0;
    transition: padding-right .5s;
}

我正在为 Oswald 字体使用 Google 字体：

<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Open+Sans:400,700|Oswald:400,700' type='text/css'>

我正在使用 CSS 重置，因此大多数属性都设置为默认值。我曾尝试摆弄 CSS 以查看是否可以分析它为什么会发生变化，但除了关闭字体外，我看不到其他效果。

这是供参考的源站点。概念设计有限公司

任何关于为什么会发生这种情况的知识都会很棒。

非常感谢，尼尔

4

2 回答 2

2

我最近遇到了同样的问题，但是我的字体没有在本地安装。（顺便说一句，这将是网页设计中的一个问题，因为您无法控制 pageviewer 计算机上安装的字体）。该问题仅出现在 Windows 的 Chrome 26 中，后来出现在 Windows 的 Firefox 19 中，但没有出现在任何其他浏览器（Windows 和 Mac OS x 都没有）上。我终于发现 Chrome/Win 只会正确呈现 SVG 字体，而 Firefox 则不加提示地使用 WOFF。

所以我用类似这样的 CSS 代码修复了错误渲染的降档

/* for all browsers */
@font-face {
font-family: 'myfont';
src: url('myfont.eot');
src: url('myfont?#iefix') format('embedded-opentype'),
         url('myfont.woff') format('woff'),
         url('myfont.ttf') format('truetype'),
         url('myfont.svg#wf') format('svg');
}

/* for all webkit-browsers (Chrome, Safari and newly Opera */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
font-family: 'myfont';
    src: url('myfont.svg#wf') format('svg');
  }
}

/* for all mozilla-browsers (Firefox) */
@-moz-document url-prefix() {
  @font-face {
font-family: 'myfont';
    src: url('myfont_unhinted.woff') format('woff');
  }
}

希望这对任何人都有帮助。

于 2013-03-29T13:38:15.577 回答
1

我遇到了同样的问题，但在 FireFox 中 - 我删除了计算机字体目录中的 Oswald 字体，它解决了这个问题。也许试一试？

于 2012-09-03T21:03:16.670 回答