Chromeでスペースが「!」になる件 text-renderingにご注意

Google Chromeでスペースが「!」で表示される症状に遭遇。
こんなの初めて。

以下のサイトで一発解決した。

windowsXP + chrome + ! (エクスクラメーション・マーク/感嘆符) + 半角スペース | B.log about CentOS6.x, Rails3.x, MySQL5.x, etc.

悪さしていたのは、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はかなり有効(速い)とのウワサもあり。実証したわけではありませんが。

HTML5&CSS3, 備忘録 | , , |