Unicode絵文字を表示する #CSS #Javascript version 2

2016/03/07 00:45 by zk33 zk33
  :追加された部分   :削除された部分
(差分が大きい場合、文字単位では表示しません)
ChromeでUnicode絵文字を表示する #バッドノウハウ #CSS #Javascript
まず前提として、

```CSS
@font-face {
  font-family: emoji;
  src:local('Helvetica Neue'), // chromeでApple Color Emojiを先頭にすると絵文字出くなるのでOSX固有のフォントが適当に指定追加してある。Chromeバグ治ったらはずかも
  //unicode-range: U+1F300-1F5FF, U+1F600-1F64F, U+1F680-1F6FF, U+2600-26FF; // ※Chrome49でunicode-range指定するとダメになったのでコメントアウト
  src:local('Webdings'),// Chromeの挙動が変なので何か適当にフォント指定が必要だが実際文字に影響のないものに
      local('Apple Color Emoji'),
      local('Android Emoji'),
      local('Segoe UI'),
      local(EmojiSymbols),
      local(Symbola),
      url('font/Symbola-Emoji.eot?#iefix') format('embedded-opentype'),
      url('font/Symbola-Emoji.woff') format('woff'),
      url('font/Symbola-Emoji.ttf') format('truetype');
  unicode-range: U+1F300-1F5FF, U+1F600-1F64F, U+1F680-1F6FF, U+2600-26FF;
  //font-weight: normal; // chromeでfont-weightが600以上/boldなところでは絵文字が出ないバグがあるのでこちらで上書きしておく。Chromeのバグなおったらはずす
}

```

こういうのを作って

```
body{
  font-family:emoji,sans-serif;
}
```
とかにすると絵文字が出る。
のだけど、Chromeが結構やんちゃで、

* Chromeにはfont-weight:600以上の部分にUnicode絵文字が出ない事がある、という不具合?がある
* 全てのUnicode絵文字が出ないわけではなく、スマホから入力された絵文字などが出ない事が多い
* 出ない絵文字は[異体字セレクタ](https://ja.wikipedia.org/wiki/%E7%95%B0%E4%BD%93%E5%AD%97%E3%82%BB%E3%83%AC%E3%82%AF%E3%82%BF)で「U+FE0E」「U+FE0F」が追加されてる場合の模様
[→参考](http://seesaawiki.jp/w/qvarie/d/%A5%E6%A5%CB%A5%B3%A1%BC%A5%C96.1%B0%CA%B9%DF%A4%C7%BB%C8%CD%D1%A4%C7%A4%AD%A4%EB%B3%A8%CA%B8%BB%FA)

【対処】
どうしようもないのでChromeの場合には異体字セレクタを消す処理を追加した
参考:https://github.com/mathiasbynens/strip-variation-selectors参考:https://github.com/mathiasbynens/strip-variation-selectors


## 更新履歴

* Chrome 49で今度は`unicode-range`の指定が悪影響を及ぼすようになったので、フォントの最初のをWebdingsにして`unicode-range`の指定を消すという感じに更新した      

まず前提として、

@font-face {
  font-family: emoji;
  //unicode-range: U+1F300-1F5FF, U+1F600-1F64F, U+1F680-1F6FF, U+2600-26FF; // ※Chrome49でunicode-range指定するとダメになったのでコメントアウト
  src:local('Webdings'),// Chromeの挙動が変なので何か適当にフォント指定が必要だが実際の文字に影響のないものにする
      local('Apple Color Emoji'),
      local('Android Emoji'),
      local('Segoe UI'),
      local(EmojiSymbols),
      local(Symbola),
      url('font/Symbola-Emoji.eot?#iefix') format('embedded-opentype'),
      url('font/Symbola-Emoji.woff') format('woff'),
      url('font/Symbola-Emoji.ttf') format('truetype');
  //font-weight: normal; // chromeでfont-weightが600以上/boldなところでは絵文字が出ないバグがあるのでこちらで上書きしておく。Chromeのバグなおったらはずす
}

こういうのを作って

body{
  font-family:emoji,sans-serif;
}

とかにすると絵文字が出る。
のだけど、Chromeが結構やんちゃで、

  • Chromeにはfont-weight:600以上の部分にUnicode絵文字が出ない事がある、という不具合?がある
  • 全てのUnicode絵文字が出ないわけではなく、スマホから入力された絵文字などが出ない事が多い
  • 出ない絵文字は異体字セレクタで「U+FE0E」「U+FE0F」が追加されてる場合の模様
    →参考

【対処】
どうしようもないのでChromeの場合には異体字セレクタを消す処理を追加した
参考:https://github.com/mathiasbynens/strip-variation-selectors

更新履歴

  • Chrome 49で今度はunicode-rangeの指定が悪影響を及ぼすようになったので、フォントの最初のをWebdingsにしてunicode-rangeの指定を消すという感じに更新した