字体在谷歌浏览器中移位

Question

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

这里有一张图片来说明问题。我已经突出显示了文本，以便您可以看到转变：

为了清楚起见，这里是 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，看看我是否可以分析它为什么会发生变化，但除了关闭字体外，我看不到其他效果。

这是供参考的源站点。 Concept Design Ltd

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

非常感谢， 尼尔

Answer 1

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

Answer 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');
  }
}

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