Chrome使用SVG格式的网络字体混乱文本（有时）

Question

演示： http://jsbin.com/onixik/2（内容如下）

如果您在Windows上的Chrome中检查该演示，它可能看起来不错，也可能不行。通过“OK”我的意思是它不起眼，只是一些文字。如果不行，则部分文本会覆盖其他文本;这很明显。

如果Chrome看起来没问题，请尝试随机调整窗口大小几次。奇怪的是，一旦它开始出错，让浏览器再次开始正确显示它真的很难（也许是不可能的）。 （编辑 - 我工作的一些人看到问题就像我一样，但他们的浏览器随后开始工作，就像我最终做的那样;也许很少有人会看到它。）

以下是“不行”时的样子：

（字体是Signika;它是Google，FontSquirrel和Adobe提供的免费字体。我在我自己的服务器上托管它，因为Google不会提供SVG，或者如果我不知道怎么做你将无法在Firefox中看到任何东西，因为我没有提供正确的CORS标题，Firefox也很挑剔。）

我知道如何解决这个问题：在SVG文件之前提供WOFF文件。我现在首先提供SVG文件，因为我在各种博客（以及此处的问题）上一遍又一遍地阅读，Chrome使得SVG比WOFF更好。在这种情况下，显然没有发生:-)有没有人看过这个并找到了另一种解决方法？

HTML：

  <div style='position: relative'>
    <div class=wf style='font-size: 135%'>
      Hello This is a test of some formatting issues
      <span style='margin-top: -3px; font-size: 120%'>*</span>
      The problem is strange.
    </div>
  </div>

CSS：

  @font-face {
    font-family: 'Signika';
    src: url('http://gutfullofbeer.net/fonts/Signika-Semibold-webfont.eot#') format('embedded opentype'),
      url('http://gutfullofbeer.net/fonts/Signika-Semibold-webfont.svg') format('svg'),
      url('http://gutfullofbeer.net/fonts/Signika-Semibold-webfont.woff') format('woff'),
      url('http://gutfullofbeer.net/fonts/Signika-Semibold-webfont.ttf') format('truetype');
  }

.wf {
  font-family: "Signika";
  font-weight: normal;
  padding: 2em;
  max-width: 12em;
}

Answer 1

Chrome似乎存在字体和文字问题。我也遇到过那个问题，只有我的文字变形了，这是付费字体。不知道为什么会这样做，但我最终通过谷歌字体尝试了不同的字体，它适用于所有4种浏览器。

尝试在Google字体上找到与您想要的字体匹配的字体，然后使用它。它更容易使用，您不必将所有这些不同的格式加载到您的服务器中，它只是从标题中的标记中抽取谷歌网站。不需要CSS。