feed

2015年05月29日, 編集履歴

Chromeで絵文字が表示されない問題

 Google Chromeには、スタイルでfont-weight:600以上が指定されていると絵文字が表示されなくなる問題があるようだ(Issue 465066)。

<p style="font-weight:400;">🙆OK</p>
<p style="font-weight:500;">🙆OK</p>
<p style="font-weight:600;">🙅NG</p>

🙆OK

🙆OK

🙅NG

 上記の場合、Chromeでは「NG」の絵文字は表示されない(Chrome 43.0.2357.81、45.0.2415.0 canaryで確認)。下駄や豆腐にもならず、絵文字分の空白と同等になる。

 font-weight:normalfont-weight:400font-weight:boldfont-weight:600と等価のようである。
 したがって、素のp要素内等では絵文字は表示されるが、strong要素やh1等の見出し要素では、大抵ディフォルトスタイルでfont-weight:bold相当になっていることが多いので、絵文字が表示されない。

 Safari 8.0.6 (10600.6.3)やFirefox 37.0.2では期待通りに動作する。Opera 25.0.1614.68はそもそも絵文字全般が豆腐になり表示できない。