un-T factory! XA Advent Calendar 7日目の記事です。
現象
Webページ上で著作権記号(©)や商標記号(®, ™)を表示させようとした際、Android版Google Chromeにおいて
-
color
やfont-weight
などのCSSプロパティが無効になる - 絵文字として表示されてしまう
など、意図した表示結果にならない場合があります。
(著作権記号のみ、CSSのcolor指定が無効になっている状態)
発生条件
検証を進めた結果、どうやら下記の条件が重なった場合にこの現象が発生するようです。
条件1. <html>
要素の lang
属性に ja
が指定されている。
<html lang="ja">
条件2. テキスト領域に有効な font-family
が指定されていない(sans-serif
などキーワード指定のみの場合もNG)。
解決策
インターネット上では「html
要素の lang
属性を en
にすれば良い」といった解説記事が散見されましたが、そうすると「そのページ全体が英語の文書である」と宣言することになってしまい、ブラウザの挙動などに影響が出る可能性がありそうです。
lang
属性は html
要素以外にも指定可能なので、以下のように特殊文字の部分だけを lang="en"
と指定し直すことで表示不具合を回避できます。
<span lang="en">©</span>
最も手っ取り早いのは「有効な font-family
を指定する」ことですが、CSSの変更権限がないなど何らかの事情でそれが出来ない場合には上記の対応が無難ではないかと思います。