Google Chromeだけ、フォントサイズがおかしいんです!そんなトラブルが起きた時に見る、Chromeのフォントサイズのクセまとめ。

///Google Chromeだけ、フォントサイズがおかしいんです!そんなトラブルが起きた時に見る、Chromeのフォントサイズのクセまとめ。

Google Chromeで見た時だけ、フォントサイズがおかしいんです!
そんなトラブルに陥った日に思い出すためのまとめです。

フォントサイズに謎の異常発生

なんだかchromeで見た時だけフォントサイズが大きい?
弊社では、remを使った場合に時々遭遇しました。
ルートとして指定してる文字サイズ

font-size: 62.5%;

が無視されているような挙動でした。
これは、Javascriptで直りました。
jQueryをお好みの方法で読み込ませたのちに、
以下のスクリプトを追加してあげましょう。
読み込み位置はヘッダーがいいかと思います。

<script>
$(function(){
	//chrome用の分岐処理
	var _ua = (function(){
	 return {
		Blink:window.chrome
	 }
	})();
	
	if(_ua.Blink){
		//chromeの文字サイズ対策
		document.body.style.webkitTransform = "scale(1)";
	}
});
</script>

本来以下の一行だけでいいのですが、

document.body.style.webkitTransform = "scale(1)";

IE8などでエラーを返してきますので、
chrome用の分岐処理を加えています。

最小フォントサイズ未満の文字サイズは統一されてしまう

以前描いた記事
WEB/スマートフォンサイトにおけるフォントサイズのベストな指定方法
でも触れた通り、
ChromeかSafariの最新版では、最小フォントサイズに満たないフォントサイズを設定すると、
全て最小フォントサイズで描画されてしまいます。

以前は-webkit-text-size-adjustなどで調整することが可能でした。
しかし今となってはchromeにおいて-webkit-text-size-adjustの機能自体が削除され、不可能になりました。

chromeのデフォルトでの最小フォントサイズの設定は、10pxなので、
10pxに満たない文字サイズはPCサイトでは画像で対応する方が無難ですね。
どうしてもテキストでの対応が必要な場合は、予め確認をとっておいたほうがいいでしょう。

参考サイト様

「Chromeでフォントサイズが異常になる問題の解決法」
http://blog.ruligh.net/20131119/96

「JavaScript ユーザエージェント条件分岐便利スニペット」
https://w3g.jp/blog/tools/js_browser_sniffing

「Google Chromeには「最小フォントサイズ」という設定項目が存在する」
http://kadoppe.com/archives/2012/07/google-chrome-minimum-font-size.html

「バージョン 27.0.1453.93 mより-webkit-text-size-adjust: none;の設定が効かない 」
http://productforums.google.com/forum/#!topic/chrome-ja/7Y2r_dYFWrg

2017-02-09T14:44:43+00:00