Mac+Firefox の一部の環境で「貂明朝」に色が付かない問題に対処する

**注意)** この記事で紹介する方法は、暫定的な方法です。文字色が正しく適用されない原因は、貂明朝か Mac か Firefox か、いずれかの不具合と思われます。

**2019/08/23 追記)** IE で表示が崩れないような CSS に修正。また、この記事で紹介している方法で稀に Edge において色が付かない問題があったので修正。

## はじめに
Adobe Fonts というサービスを使うことで、「貂明朝」(てんみんちょう)というフォントをウェブフォントとして使うことができます。(有料だっけ？)

https://fonts.adobe.com/fonts/ten-mincho

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43456/36604df6-3078-4b8a-2841-31bef098b655.png" width="300">

しかし、なぜか Mac の Firefox で、貂明朝に文字色指定が効かない事態に遭遇したので、とりあえずの対処法をまとめておきます。

## 貂明朝で文字色指定が効かない
`color: #d8354d` という指定をしているのにも関わらず、以下のように表示されてしまう。

(英数部分は別フォントのため、色がつく)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43456/b2db7942-62d3-66a9-b433-32fa9d4c5e73.png)

### 環境
- macOS Mojave バージョン 10.14.6
- Firefox Quantum 68.0.2

## (暫定的)対処方法
`color` で文字色を指定するのではなく、以下のような方法で文字色を指定します。

`ten-mincho` というクラスが設定されているタグに対し、色付きの貂明朝が適用されます。

```css
.ten-mincho {
  color: transparent;  /* color は透明にしておく */
  -webkit-background-clip: text;
  background-clip: text;
  background: #d8354d;  /* 文字色はここで指定する */
}

/*
IE で background-clip: text が効かないので、
CSS ハックで、IE だけ color で文字色指定する
*/
_:lang(x)::-ms-backdrop, .ten-mincho {
  background: none;
  color: #d8354d;  /* 文字色はここにも指定する */
}

/*
Edge で、稀に background-clip: text が効かないので、
Edge についても color で文字色指定する
*/
_:-ms-lang(x)::backdrop, .ten-mincho {
  background: none;
  color: #d8354d;  /* 文字色はここにも指定する */
}
```

(CSS ハックについては https://qiita.com/feo52/items/b58de2c43e1ba7b10b2e を参考にしています)

これで、貂明朝に文字色を付けることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43456/c891d741-d667-9008-0174-2ae7f59c1447.png)


### なぜこれで対処できるのか
`background-clip: text` は、本来、背景画像を文字で切り取って表示するためのスタイルです。

https://developer.mozilla.org/ja/docs/Web/CSS/background-clip

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43456/bc9a8965-dc0b-964f-7c20-a261dbe4b742.png" width="300">

`color` 指定が効かないなら、文字自体に色を付けるのを諦め、背景色を文字で切り取って表示することで、まるで文字色を付けているかのように見せています。


## おまけ
### 不具合の原因？
貂明朝が特殊なフォントだから？

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43456/9a71298f-dfbe-573b-bd9d-33264434cf95.png" width="500">

> 妖しくも可愛いSVGカラーグリフ32個を加え、新たにカラー絵文字が登場しました。漢字の「貂（てん）」で変換できる4匹の貂や十二支、太陽や貂の雪だるまなど、さまざまな色付きのSVGグリフが貂明朝と貂明朝テキストには隠されていますので、どんな絵文字がひそんでいるか、ぜひお試しください！

(画像・文は https://blogs.adobe.com/japan/adobefonts-one-year-of-ten-mincho-colorful-updates-and-ten-mincho-text/ より)

色付きのグリフと同様に、通常の文字部分は「黒」という色で固定されてしまっているのでしょうか…？原因はわかりません。

### せっかくFirefoxではカラーで絵文字が表示できるのに…
ちなみに、この記事で紹介した方法で文字色を指定した場合、もともと Firefox ではカラーで表示できていたものが、カラーではなくなってしまいます。

(ちなみに、Chrome では、貂明朝に対して `color` 指定が効くので、そもそもカラーになりません…)

| これが… | こうなってしまう… |
| --- | --- |
| <img width="640" alt="スクリーンショット 2019-08-21 12.21.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43456/99649c80-f352-e360-4d79-c0ccab56a60b.png"> | <img width="640" alt="スクリーンショット 2019-08-21 12.21.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43456/cd6f2bb6-f367-7979-124f-3e84005397c2.png"> |

文字部分にはちゃんと色を付けたい！でも、絵文字はカラーになってほしい！という方は、以下のように対処すれば良いかと思います。

```html:HTML
<p class="ten-mincho">
  <!-- 絵文字部分を span タグで囲む -->
  <span>☀</span>絵文字だよー<span>☃</span>
</p>
```

```css:CSS
.ten-mincho {
  color: transparent;  /* color は透明にしておく */
  -webkit-background-clip: text;
  background-clip: text;
  background: #d8354d;  /* 文字色はここで指定する */
}

.ten-mincho span {
  /* .ten-mincho の background と一緒の色にした方が良い */
  color: #d8354d;
}
```

こうすれば、Firefox ではカラー絵文字と通常の文字を共存させることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43456/4a2b988a-abd9-8f5d-21d4-9e3895915cd1.png)

ちなみに、Chrome では color 指定が効くので、絵文字はそもそもカラーになりません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43456/d0dcef67-73de-84a1-05c8-51a2ed021c23.png)