css - Chrome は、SVG 形式の Web フォントでスタイル設定されたテキストをごちゃまぜにする (時々)

Question

デモ: http://jsbin.com/onixik/2 (内容は以下にあります)

そのデモを Windows の Chrome で確認すると、問題ないように見える場合とそうでない場合があります。「OK」とは、目立たない、単なるテキストであることを意味します。問題がある場合は、テキストの一部が他のテキストを上書きします。それはかなり明白です。

Chrome で問題ないように見える場合は、ウィンドウのサイズをランダムに数回変更してみてください。奇妙なことに、一度エラーが発生すると、ブラウザに再び適切に表示させるのは非常に困難です (おそらく不可能です)。(編集— 私が一緒に働いている何人かの人々は、私と同じように問題を見ましたが、彼らのブラウザはその後、私のように動作し始めました。おそらく、それを見る人はほとんどいないでしょう.)

「ダメ」の場合はこんな感じです。

(フォントは Signika です。これは、Google、FontSquirrel、および Adob​​e から入手できる無料のフォントです。Google は SVG を提供しないため、または作成するかどうかわからないため、自分のサーバーでホストしています。私は正しい CORS ヘッダーを提供しておらず、Firefox はうるさいので、Firefox では何も表示されません。)

私はこれを修正する方法を知っています: SVG ファイルの前に WOFF ファイルを提供します。ただし、現在、最初に SVG ファイルを提供しています。これは、さまざまなブログ (およびここでの質問) で、Chrome が WOFF よりも SVG をより適切にレンダリングすることを何度も読んだためです。この場合、それは明らかに起こっていません:-) 誰かこれを見て、別の回避策を見つけましたか?

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;
}