Google Chromeでスペースが「!」で表示される症状に遭遇。
こんなの初めて。
以下のサイトで一発解決した。
悪さしていたのは、CSSのプロパティ、text-rendering
の設定。
横着してWordpressのTwentryTwelveテーマのCSSをそのまま流用したのが原因。
以下のようなCSSの記述がソレ。
body { font-size: 14px; font-size: 1rem; font-family: Helvetica, Arial, sans-serif; text-rendering: optimizeLegibility; color: #444; }
text-rendering
なんて知らなかったです。text-rendering
については以下のサイトでちょうど同じような経験をされた方が貴重なメモを残してくれています。
text-rendering: optimizeLegibility – terkel.jp
CSSというよりはSVGのためのプロパティみたいです。が、ボク自信はよくわかっておりません(笑)。
文字のカーニングなどが可能だとか。へー。
目指す機能そのものはとても良さそうですが、ブラウザによって挙動が異なるようでは…、まだ使用は控えたい。
自宅のWindows7では今回の症状は確認できず、出先で借りたXPマシンで確認されたので、発生条件はかなり限られているかもしれませんね。
text-rendering
プロパティの種類は次の通り。
auto
(初期値)optimizeSpeed
optimizeLegibility
geometricPrecision
inherit
調べてみると、日本語で言及しているサイトはごくわずか。いかに浸透していないプロパティかがわかります。で、英語サイトを翻訳する気力もわかず…。上の参考ページに頼りっきりなお勉強となりました。
このうち optimizeSpeed と geometricPrecision は違いがよくわからなかったのですが、optimizeLegibility はカーニングと合字 (リガチャ) をうまい具合に調整してくれるもので、現実世界でもけっこう使えそうです。ただフォントがカーニングや合字のデータを持っていなければ指定しても何も起こりません。和文フォントでは、メイリオと MS 系ゴシック・明朝は効果がないですが、ヒラギノ角ゴ・明朝は軽くカーニングが調整されます。
モバイルサイトだと、optimizeSpeed
はかなり有効(速い)とのウワサもあり。実証したわけではありませんが。