フォントサイズと行間は、ユーザーにコンテンツをストレスなく読んでもらう為の重要な要素のひとつです。モバイルフレンドリーの重要性がますます高くなっていくなか、改めてスマートフォンで読み易いfont-sizeは何か？行間は？検証を行いました。 Chromeブラウザでは、CSSでfont-sizeを10px以下に設定しても、 ブラウザの設定で最小フォントサイズが決まっているため、10px(Default)以下にはならないようになっています。 今回は、Chromeでfont-sizeを10px以下に設定する2つの方法について整理しました。 ホームページ入門サイトのmin-widthプロパティについて説明したページです。min-widthは最小幅を設定します。CSSでのmin-widthの構文や利用例を説明すると共に、widthとの違いについても補足していま … 二俣です。ちょっとニッチな内容かもしれないですが、備忘録を兼ねて。 よくあるfont-sizeの指定方法 よく見かけたり、使ったりしているfont-sizeの単位は、だいたい下記のような感じかと思います。 px絶対指定。pxで指定する。 em相対指定。親要素のフォントサイズの何倍か。 ブラウザが表示できる最小フォントサイズは10px ブラウザは可読性維持のために、CSSで10px未満のフォントサイズを指定しても無視するという機能が備わっています。 以下の例では、決して7pxで表示されることはありません。 後述しますが、zoomを使っても無駄でした。

数値にpxやemやexなどの単位をつけて指定します。pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。また、emとはフォントの高さを1とする単位で、exとは小文字の｢x｣の高さを1とする単位です。 クロームだけCSSが効かない、、フォントサイズが小さくならないのだ、、、朝からこの症状に悩まされて系3時間くらいを無駄に過ごしてしまった。 Google クロームには最小フォントサイズが存在する CSSファイルで親要素を指定していない場合、1文字の大きさは16pxとなります。 ... remを使う場合は、Google Chromeが指定している最小フォントサイズに気を配らなければなりません。 頑なにフォントサイズ10px以下で表示させようとしないGoogle Chrome。 font-size が効かないとなると、諦めて10pxにするか画像を作るか…といった妥協策が思い付きますが、CSSだけで思い通りのフォントサイズに表示させる方法がありました。