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

2016/05/30 12:49 by zk33 zk33
  :追加された部分   :削除された部分
(差分が大きい場合、文字単位では表示しません)
ChromeでUnicode絵文字を表示する #バッドノウハウ #CSS #Javascript
まず前提として、絵文字を含んだfont-faceを作る必要がある。
ただ、OSXのChromeが非常に厄介な問題を抱えているため、色々と工夫が必要。
OSXのChromeの絵文字まわりの不具合

mimemoの場合
* 太字(font-weight:600以上)にすると絵文字が出ない
* `@font-face`でunicode-rangeを指定すると挙動が怪しい

```CSS
が解消されたので、ようやく普通に使えるようになった。(文字間が妙に詰まったりするけど)

ただ、一部の絵文字がかわいくないほうで表示されるので、徹底的にUnicode-rangeを指定して、OSXでできるだけカラー絵文字が出つつ、他に悪影響出にくいようにするとこう(調整中)

```css
@font-face {
  font-family: emoji;
  /* unicode-range: U+1F300-1F5FF, U+1F600-1F64F, U+1F680-1F6FF, U+2600-26FF; // ※Chrome49でunicode-range指定するとダメになったのでコメントアウト*/
  src:local('Helvetica Neue'),
      local('Apple Color Emoji'),
  unicode-range: U+2139, U+2194-2199, U+21A9-21AA, U+231A-231B, U+2328, U+23E9-23FA, U+2600-27BF, U+2B00-2BFF, U+1F000-1F0FF, U+1F170-1F251, U+1F300-1F6FF, U+1F900-1F9FF,
  src:local('Apple Color Emoji'),
      local('Zapf Dingbats'),
      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');
      url('fonts/Symbola-Emoji.eot?#iefix') format('embedded-opentype'),
      url('fonts/Symbola-Emoji.woff') format('woff'),
      url('fonts/Symbola-Emoji.ttf') format('truetype');
}
@font-face {
  font-family: emojiBold;
  /* unicode-range: U+1F300-1F5FF, U+1F600-1F64F, U+1F680-1F6FF, U+2600-26FF; // ※Chrome49でunicode-range指定するとダメになったのでコメントアウト*/
  src:local('Helvetica Neue'),
      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: 500;
}
```

こうして`emoji`、`emojiBold`というfont-faceを作って、

```
body{
  font-family: -apple-system, 'Roboto','Segoe UI',emoji, 'Helvetica Neue','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, 'MS PGothic', sans-serif;
}
strong{
  font-family: -apple-system, 'Roboto','Segoe UI',emojiBold, 'Helvetica Neue','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, 'MS PGothic', sans-serif;
}
```

みたいにする。

* `emoji`みでいきたかったのだけど、`emoji`だけだと太字にした箇所の欧文が細くなる
* Chromeにはfont-weight:600以上の部分にUnicode絵文字が出ない事がある、という不具合があるため、太字のfont-faceは`font-weight:500`にする。Helvetica Neueを使う場合は500でMedium相当の文字が出るのでウェイトとしてもちょうどいい塩梅
* `emoji`をフォントの先頭に置く他の環境でフォントが残念なことになようなので、`-apple-system`などOSXのChromeで使えないが他の環境にあるフォントは`emoji`より前に置く
* さにChromeでスマホから入力された絵文字が出ない事があり、出ない絵文字は[異体字セレクタ](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
フォールバック用の絵文字Webフォントとして使って「Symbola」[こちら](http://users.teilar.gr/~g1951d/)
      

OSXのChromeの絵文字まわりの不具合

  • 太字(font-weight:600以上)にすると絵文字が出ない
  • @font-faceでunicode-rangeを指定すると挙動が怪しい

が解消されたので、ようやく普通に使えるようになった。(文字間が妙に詰まったりするけど)

ただ、一部の絵文字がかわいくないほうで表示されるので、徹底的にUnicode-rangeを指定して、OSXでできるだけカラー絵文字が出つつ、他に悪影響出にくいようにするとこう(調整中)

@font-face {
  font-family: emoji;
  unicode-range: U+2139, U+2194-2199, U+21A9-21AA, U+231A-231B, U+2328, U+23E9-23FA, U+2600-27BF, U+2B00-2BFF, U+1F000-1F0FF, U+1F170-1F251, U+1F300-1F6FF, U+1F900-1F9FF,
  src:local('Apple Color Emoji'),
      local('Zapf Dingbats'),
      local('Android Emoji'),
      local('Segoe UI'),
      local(EmojiSymbols),
      local(Symbola),
      url('fonts/Symbola-Emoji.eot?#iefix') format('embedded-opentype'),
      url('fonts/Symbola-Emoji.woff') format('woff'),
      url('fonts/Symbola-Emoji.ttf') format('truetype');
}

フォールバック用の絵文字Webフォントとして使ってる「Symbola」はこちら