---
Title: 'Unicode絵文字を表示する #CSS #Javascript'
Keywords:
  - CSS
  - Javascript
Author: zk33
Web: 'https://mimemo.io/m/b8agmD4pklRjYzy'
---

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

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

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

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

```css
@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」は[こちら](http://users.teilar.gr/~g1951d/)