Chrome上でWordPressページ内の空白がビックリマーク（!エクスクラメーション）で表示されてしまう

Google ChromeでWordPressページ内の空白が!（ビックリマーク、感嘆符、エクスクラメーション）で表示されてしまう不具合に遭遇したことはありませんか？

↓こんな感じです。

⇒　

ＩＥやFirefoxでは問題ないのに Google Chrome だけ半角の空白が!（ビックリマーク、感嘆符、エクスクラメーション）で表示されてしまうという不具合です。
これはGoogle Chrome のレンダリングの問題ということになると思いますが当方の環境では、
・Google Chrome バージョン 26.0.1410.43 m
・WordPress バージョン　3.5.1　（テンプレート「twentytwelve」使用）
で少なくとも発生します。

直接的な原因はこのテンプレートテーマ「twentytwelve」のＣＳＳで使用されている、
text-rendering: optimizeLegibility;
というスタイル属性が原因です。
ちなみにテーマのスタイルシート（style.css）の
text-rendering: optimizeLegibility;
となっている部分を
text-rendering: auto;
にすればこの問題は回避できます。

このtext-renderingという属性は、twentyten　や　twentyeleven には記述されておらず twentytwelve から新たに追加されたCSS属性です。
このため、最近WordPressを3.5.1にバージョンアップしてこの問題に遭遇したというケースも多いのではないでしょうか。

text-rendering属性は、文字列の描画処理の最適化の手がかりをブラウザに与えるプロパティです。この値がoptimizeLegibilityに設定されているということは、
「読みやすさを速度や幾何学的な正確さよりも優先するべきことを示す」
という意味になります。

なんか賢そうな属性なので auto にするのは避けたい場合は
text-rendering: optimizeLegibility;
は残しておいて、替わりに　font-family を
font-family: Helvetica, Arial, sans-serif;
から別のフォントに変更することでもこの問題は解決することができます。

ちなみに私は　style.css の 「text-rendering: optimizeLegibility;」の設定は残して font-family を以下のように変更してこの問題を回避しました。

body {
        font-size: 14px;
        font-size: 1rem;
/*      font-family: Helvetica, Arial, sans-serif; */
        font-family:"MS PGothic", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Helvetica, Arial, sans-serif;
        text-rendering: optimizeLegibility;
        color: #444;
}

text-rendering 属性は日本語フォントには未対応だそうです。
だから日本語フォントを指定すればこの問題は回避される訳ですね（笑）。
逆に言うと、欧文フォントを使用して text-rendering 属性を設定していると Google Chrome では半角空白文字が!（ビックリマーク、感嘆符、エクスクラメーション）に化けてしまうという不具合があるということになります。
このような基本的な問題なので欧米では発生していないとしたら、Chromeの日本語環境での問題かもしれません。