NonTitleのブログはガンバ大阪,ガンバ大阪ブログ,Radiohead,くるり,村上春樹,エヴァンゲリオン,Apple,WEB制作,リスティング広告,SEO,WordPress,グーグル,写真などの内容の記事が多くなっています 記事数【1,056】

Chromeの自動フォントサイズ調整機能

ChromeでCSSのfont-size:9px以下が有効にならないのをご存知でしょうか。僕はお恥ずかしながら最近知りました。Chromeにはユーザーがテキストを読みやすいように自動で小さすぎる文字を大きくする機能を備えています。個人的にはそんなもん実装するなよって思いますが、ユーザビリティ的には正解なんでしょうかね。

ですが、Chromeのそのありがたいのかどうかわからない自動フォントサイズ調整機能をCSSで強制的に無効にする方法があります。下記のプロパティで「none」を設定するだけです。個人的にはCSSで無効にされるようなものなら実装すんなよってまたまた思っちゃいます。全体に設定したいのであれば「body」に記述すればいいですし、特定の箇所だけに設定したければ「id」や[class]に記述してください。


-webkit-text-size-adjust:none;

これで問題(?)はクリアされているのですが、個人的にはクリアできていない点が1つあります。ブラウザに実装されている「拡大/縮小」機能がありますよね。Chrome以外のブラウザなら問題ないのですが、Chromeだとこの「拡大/縮小」機能を使って縮小しすぎすると、同様にフォントサイズを大きくしてしまいます。上記のプロパティも無視されますので、現在のところChromeのこの仕様に則るしかありません。

そんなイレギュラーなことは無視すればいいと個人的には思うのですが、レイアウトが崩れるブロックがあったりで、ただただ気持ち悪いのです。Chromeのそういった独自の機能があることを知らなかったので、今更対応するのが腰が重すぎて…。というなんやらよくわからないわがままな理由です。ということで、皆さんChromeの自動フォントサイズ調整機能にはお気を付けください。

オススメ記事

関連記事

人気記事

↑Topへ戻る