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

n2p blog

キャンペーンやSNSの
“ためになる”情報を
執筆しています。

更新日:2022.10.18 (公開日:2014/01/14)

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

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

なんだかchromeで見た時だけフォントサイズが大きい？
弊社では、remを使った場合に時々遭遇しました。
ルートとして指定してる文字サイズ
[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][html] font-size: 62.5%;
[/html] が無視されているような挙動でした。
これは、Javascriptで直りました。
jQueryをお好みの方法で読み込ませたのちに、
以下のスクリプトを追加してあげましょう。
読み込み位置はヘッダーがいいかと思います。
[/fusion_builder_column][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][html] <script>
$(function(){
//chrome用の分岐処理
var _ua = (function(){
return {
Blink:window.chrome
}
})();
if(_ua.Blink){
//chromeの文字サイズ対策
document.body.style.webkitTransform = “scale(1)”;
}
});
</script>
[/html] 本来以下の一行だけでいいのですが、
[/fusion_builder_column][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][html] document.body.style.webkitTransform = “scale(1)”;
[/html] 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[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]