SyntaxHighlighter EvolvedとConsolas、サイズ14pxの組み合わせで豆腐文字がでます

コードを見やすくハイライト表示してくれるSyntaxHighlighter。このサイトでも以前紹介しましたが、対応言語も多く、動作も早い「SyntaxHighlighter Evolved」を導入しているサイトが多いようです。

前から気になっていたのですが、特定の条件で日本語が文字化けするようです。どうやらコードの表示に使うConsolasというフォントと、14px（1em）の組み合わせで文字化が発生するようです。せっかくわかりやすく書いても、下の画像のように文字化けしたら意味がありません。

Consolasはコードを表示するには最適なフォントなので、変えたくありません。今回はサイズ変更して対応します。
追記：どうやらGoogle Chromeの特定のバージョンでConsolasを使った時だけ起こる現象のようです。仕方がないので「/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles」47行目あたりフォントファミリーを以下の用に変更して対応しています。

  font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','ＭＳ ゴシック','MS Gothic','Osaka', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;

---

対処法

（この対処法でも直ることもありますが、上の追記の方法を使うのが一番確実な解決法です）

wordpressのルートディレクトリ「/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles」にある「shCore.css」を開きます。（バージョン2を使っている場合はsyntaxhighlighter2フォルダを参照してください）50行目あたり

  font-style: normal !important;
  font-size: 1em !important;
  /*min-height: inherit !important; */

フォントサイズを14px（1em）以外にします。今回は「0.99em」としました。

  font-style: normal !important;
  font-size: 0.99em !important;
  /*min-height: inherit !important; */

番号の行間も合わせて変えておきます。110行目当たり

.syntaxhighlighter table td.gutter .line {
  text-align: right !important;
  padding: 0.3em 0.5em 0.3em 1em !important;
}

0.3emを下のように0.2emへ変更します。

.syntaxhighlighter table td.gutter .line {
  text-align: right !important;
  padding: 0.3em 0.5em 0.2em 1em !important;
}

以上の変更で下記のように文字化けが直りました。