Chrome 会混淆使用 SVG 格式的网络字体样式的文本（有时）答案

【问题标题】：Chrome jumbles text styled with a web font in SVG format (sometimes)Chrome 会混淆使用 SVG 格式的网络字体样式的文本（有时）
【发布时间】：2013-02-07 05:39:16
【问题描述】：

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

如果您在 Windows 上的 Chrome 中查看该演示，它可能看起来正常，也可能不正常。 “OK”是指它不起眼，只是一些文字。如果不行，则部分文字覆盖其他文字；这很明显。

如果 Chrome 看起来不错，请尝试随机调整窗口大小几次。奇怪的是，一旦它开始出错，就很难（也许不可能）让浏览器重新开始正确显示它。（edit — 一些与我共事的人和我一样看到了这个问题，但他们的浏览器随后开始工作，就像我的最终所做的那样；也许你们中很少有人会看到它。）

这是“不正常”时的样子：

（字体是 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;
}

【问题讨论】：

FWIW 尽管反复调整大小/缩放，但我无法在 PC 上的 Chrome 24.0.1312.57 中重现。
@TimMedora 非常感谢您的尝试 :-) 这是一个非常奇怪的行为；渲染器的内部显然出了问题。一旦出错，即使字体是从完全不同的 URL 提供的，也是错误的！而现在，在我的平台上，它已经自我修复了，我不能再让它被破坏了。幸运的是我及时得到了屏幕截图:-)
我在同一条船上 - 无法重现它。
@UncleIroh 也许它只是在那个短暂的时间窗口内被破坏了 :-) 我很高兴这是别人的错误，而不是我的！
它在 Windows 7 上的 Chrome 版本 26.0.1410.43 m 上坏了。

标签： css google-chrome svg webfonts

【解决方案1】：

Chrome 似乎在字体和文本方面存在问题。我也有这个问题，只有我的文字扭曲了，而且是付费字体。不知道为什么会这样，但我最终通过 google-fonts 尝试了一种不同的字体，它适用于所有 4 个浏览器。

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

【讨论】：