Chromeでこれらのスパンアイコンの色が異なるのはなぜですか？

Question

私はこれがインストールされている新しいバージョンのChromeにリンクされていると思うが、これは私が考えていることとは違う唯一のものだが、それを証明することはできない。

私はこのすべて同じ色になります別の占星術のアイコン、表示するCSSスパンクラスのシリーズがあります ：クロム以外のすべてのブラウザで

.ai { 
    display:inline-block; 
    margin-right:10px; 
    color:#74347a; 
} 
.ai.aries:before { 
    content:"\2648"; 
} 
.ai.taurus:before { 
    content:"\2649"; 
} 
.ai.gemini:before { 
    content:"\264A"; 
} 
.ai.cancer:before { 
    content:"\264B"; 
} 
.ai.leo:before { 
    content:"\264C"; 
} 
.ai.virgo:before { 
    content:"\264D"; 
} 
.ai.libra:before { 
    content:"\264E"; 
} 
.ai.scorpio:before { 
    content:"\264F"; 
} 
.ai.sagittarius:before { 
    content:"\2650"; 
} 
.ai.capricorn:before { 
    content:"\2651"; 
} 
.ai.aquarius:before { 
    content:"\2652"; 
} 
.ai.pisces:before { 
    content:"\2653"; 
} 

を、私は望ましい効果を得ます

しかし、Chromeでは、インスペクタで説明がなく、非常に奇妙な色のサイクルが続いているようです。

私はそれがこれらの色を示すだろう期待して、JSFiddleを作ったが、ちょうど、FirefoxとChromeでそれをチェックし、実際にそう、誰にも有用されていない、適切な挙動を示していますそれは私のサイトになければなりません。しかし、何も明らかではありません。

私はそれを無効にしたブートストラップCSSだと思っていましたが、まだそこにあります。最新のGoogle Chromeのリリース（V53）で

Answer 1

色絵文字フォントのサポートが有効化された、フォント（スクリーンショットに応じてこれらの特殊文字を描画するために使用されている）のSegoe UI絵文字は、このようなフォントです各文字にはあらかじめ定義された色（複数の場合もあります）があります。だから、他のブラウザはまだ灰色か黒の色合いでアイコン（emojis実際）をレンダリングしますが、Chromeは意図した色を表示します。

詳細については、Google Chrome Changelogおよびcolor extension in OpenType fontsを参照してください。 Windowsの8.1では、マイクロソフトadded unofficial color support to fontsは、最初のSegoe UI絵文字フォントで実装：

大きなフォント追加はのSegoe UI絵文字フォント、色、フォントのサポートです。カラーフォントは、OpenTypeフォント仕様の拡張機能を使用します。 Segoe UI Emojiフォントを使用したカラーフォントレンダリングでは、TrueTypeグリフアウトラインを使用しているためスケーラブルなフルカラーグリフを使用して絵文字シンボル文字を表示できます。カラー絵文字表示はDWriteテキストスタックでサポートされており、WindowsストアアプリケーションやWindowsシェルで使用されるHTMLおよびXAMLアプリケーションUIフレームワークではデフォルトで有効になっています。

はあなたのマシン上でそれをテストするには、あなたがのSegoe UI絵文字フォントをアンインストールする（私もに助言するものではありません）でした、すべてのアイコンは、デフォルトのUTF8文字にフォールバックして、CSSで設定した色を持っている必要があります。

マルチカラーフォントの文字のカラーレンダリングを制御する方法については、this discussionとcurrent proposalを参照してください。これは、CSSフォント4で一番早く利用可能になります。

Answer 2

回避策に興味がある人は... 背景色とcss background-clipプロパティを使用している可能性があります。私の場合、これは十二指腸の看板の記号を使用していて、色付きボックスとしてレンダリングされているので、これでは十分ではありません。ですから、記号エンティティを使用してWindingsフォントを使用する必要があります。Windows以外のOSでのWindingsのサポートについてはわからないので、究極の解決策ではないかもしれません。

EDIT：とにかく、これが満たされたボックスやサークルの中に閉じ込めていないすべてのそれらのシンボルのための解決策になると、次のスニペットではストライキのように、コンテンツを区別するために色の違いに依存することができませんでした：

.BigText {font-size: 30px} 
 

 
.Windings {font-family: Wingdings;} 
 

 
.SolidColorIcon { 
 
    background-color: dodgerblue; 
 
    \t color: transparent; 
 
\t -webkit-background-clip: text; 
 
\t background-clip: text; 
 
} 
 

 
.GradientIcon { 
 
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, dodgerblue), color-stop(0.4, skyblue), color-stop(0.6, pink)); 
 
\t background-image: gradient(linear, left bottom, left top, color-stop(0, dodgerblue), color-stop(0.4, skyblue), color-stop(0.6, pink)); 
 
\t color: transparent; 
 
\t -webkit-background-clip: text; 
 
\t background-clip: text; 
 
}

<span class="BigText"> 
 
    &#9889 &#9800 ^_`abcdefghi &#9934 
 
</span><br> 
 

 
<span class="BigText Windings"> 
 
    &#9889 &#9800 ^_`abcdefghi &#9934 
 
</span><br> 
 

 
<span class="BigText Windings SolidColorIcon"> 
 
    &#9889 &#9800 ^_`abcdefghi &#9934 
 
</span><br> 
 

 
<span class="BigText Windings GradientIcon"> 
 
    &#9889 &#9800 ^_`abcdefghi &#9934 
 
</span><br>

162pxより大きいフォントサイズでChromeでフォントのアイコン

のスタイルをあなたに制御を恩返しフォントコード化された色を無効にするようです