Androidでfont-weight:boldを適用する方法

Androidでは日本語にfont-weight:boldが適用されません。

<p style="font-weight:normal">ノーマル normal</p>
<p style="font-weight:bold">ボールド bold</p>

このHTMLをAndroidで確認すると次のようになります。

Androidでfont-weight:bold

日本語だけ太字になっていないですね、デフォルトのフォントにbold体がないらしいんですが、デバイス毎にフォントも変わるのでfont-familyでは回避できず。

対策としてはfont-weightの代わりにtext-shadowを利用して太字にします。

<p style="text-shadow:1px 0 0 black">ボールド bold</p>

ただ、この方法だとiPhoneでは太字になるけどAndroidでは太字になりません。Androidではtext-shadowのぼかし距離に0を指定すると指定が無視されます。そのため次のように指定しなくてはいけません。

<p style="text-shadow:1px 0 1px black">ボールド bold</p>

Androidでfont-weight:bold

じゃっかん滲みが気になりますね。ですのでAndroidを考慮したスマートフォンサイトのデザインでは太字ではなく色やサイズでテキストの強弱をつけたほうがいいですよ。

to-Rについて: JavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。
書いてる人: 西畑一馬 (株式会社トゥーアール)
代表取締役/フロントエンドエンジニア
株式会社トゥーアールについて: 渋谷にあるフロントエンドに特化したWeb制作会社です。フロントエンドの実装についてお困りの事がありましたらお気軽にご相談ください。
株式会社トゥーアールへのお問い合わせ

最近のエントリー