Androidで©の色がおかしくなる現象に遭遇したので、対応方法をメモ。
確認した端末はNexus7の4.4.3です。
問題の発生したコード
HTML
<p>コピーライト</p> <small class="copy1">© cly7796.net</small> <p>文字色が白色のコピーライト</p> <small class="copy2">© cly7796.net</small> <p>コピーライト以外の特殊文字いくつかテスト</p> <small class="copy3">® ① ㈱</small>
CSS
.copy2 {
color: #ffffff;
background: #333333;
}
確認した端末だと、©と®だけ水色の文字色で表示されていました。
©と®がうまく表示されないデモページ
原因
調べてみると、<html>タグにlang=”ja”が入っている場合に発生するようです。
lang=”ja”を省いたりlang=”en”に変更したりすると、発生しませんでした。
lang=”ja”を省いた場合のデモページ
lang=”en”に変更した場合のデモページ
対応方法
Androidで使用できるフォントをfont-familyで指定することで対応できるようです。
今回の端末の場合、VerdanaやDroid Sansを指定すると対応できました。
HTML
<div class="test verdana">© ®</div> <div class="test droid-sans">© ®</div>
CSS
.verdana {
font-family: Verdana;
}
.droid-sans {
font-family: "Droid Sans";
}
Androidは搭載フォントが端末によって結構違ったりするので難しいですが、とりあえずRobotoとDroid Sansあたりを指定しておけば大丈夫そうです。
font-family指定のデモページ
【参考サイト】
コメントが承認されるまで時間がかかります。