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を考慮したスマートフォンサイトのデザインでは太字ではなく色やサイズでテキストの強弱をつけたほうがいいですよ。

関連エントリー

Androidの画面キャプチャを撮る
Androidブラウザでviewportのwidth指定
Androidの「target-densitydpi」でviewportの調整
Android エミュレータでサイト制作
HTML5が使えるスマートフォンOS

スポンサードリンク

«6月11日に金沢でセミナー出演します! | メイン | [ASCII.jp]いまから始める、jQuery Mobileの基本»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/765
コメント

西畑さん、こんにちは。

いい記事ありがとうございます。
楽しく読みました。
このfont-weightの件はAndroid のバグですか?もしバグの報告がまだなら、報告してあげるといいかもです。次のアップデートでみんな助かったりしますしね。

投稿者:菊池崇 | 2011年5月21日 23:50

text-shadowのぼかしの件は海外のフォーラムでもちょくちょく見かけたのでけっこう有名じゃないかなと思います、Droid Sans Japaneseにbold体がないのはどうも仕様っぽいですね。バグ報告は英語ができない僕には少し敷居が高いです ><

投稿者:西畑一馬 | 2011年5月23日 12:12
コメントを投稿