Unicode絵文字の色
最新のブラウザに絵文字を含めることは可能ですが、どうすればそれを単色にし、その色を選択できますか？
たとえば、いくつかの絵文字と通常の（プレーン0）Unicodeシンボルがあります。すべてを赤にする必要がありますが、シンボルのみが赤でレンダリングされます。
関連 HTML + CSS ：
<p>
????????????
</p>
<p>
♥★ℹ
</div>
p {
font-size: 3em;
color: red
}
はい、着色できます！
div {
color: transparent;
text-shadow: 0 0 0 red;
}<div>????????????</div>すべての絵文字が同じように機能するわけではありません。現在は（オプションまたはデフォルトの）カラフルな表現を持つ古いテキストシンボルもあれば、明示的に（のみ）絵文字として使用されるものもあります。つまり、一部のUnicodeコードポイントには、textとemojiの2つの可能な表現が必要です。著者とユーザーは、どちらか一方の好みを表現できる必要があります。これは現在、他では見えない variation selectors U + FE0E（text、VS-15）およびU + FE0F（emoji、VS-16）で行われていますが、 上位レベルのソリューション（CSSなど） が提案されています。
テキスト形式の絵文字は単色で、他のグリフと同様に、CSSのcurrentcolorなどの前景色で表示する必要があります。 Unicodeコンソーシアムは、 スタイルによる絵文字の概要 （ ベータ版 ）を提供します。 HTMLに︎を追加して、「Default Text Style; VSs」と「デフォルトの絵文字スタイル; にはVSがあります」。これには絵文字の例は含まれていません????????????しかし、他の多くの。
p {
color: red; font-size: 3em; margin: 0;
text-transform: text; /* proposed */
font-variant-emoji: text; /* proposed */
font-variant-color: monochrome; /* proposed */
font-color: monochrome; /* proposed */
font-palette: dark; /* drafted for CSS Fonts Level 4 */
}
p.hack {
color: rgba(100%, 0%, 0%, 0);
text-shadow: 0 0 0 red;
}
p.font {
font-family: Emojione, Noto, Twemoji, Symbola;
}
@font-face { /* http://emojione.com/developers/ */
font-family: Emojione;
src: local("EmojiOne BW"), local("EmojiOne"), local("Emoji One"),
/* https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-bw.otf – monochrome only, deprecated, removed
https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-Android.ttf – with hack
https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-Apple.ttf – with hack */
url("https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-svg.woff2") format("woff2"),
url("https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-svg.woff") format("woff"),
url("https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-svg.otf") format("truetype");
}
@font-face { /* https://www.google.com/get/noto/#noto-emoji-zsye */
font-family: Noto;
src: local("Noto Emoji"), local("Noto Color Emoji"), local("Noto"),
url("https://cdn.rawgit.com/googlei18n/noto-emoji/master/fonts/NotoEmoji-Regular.ttf");
}
@font-face { /* https://github.com/eosrei/twemoji-color-font/releases */
font-family: Twemoji;
src: local("Twemoji");
}
@font-face { /* http://users.teilar.gr/~g1951d/ */
font-family: Symbola;
src: local("Symbola");
}<p title="????????????♥★ℹ???????? without variation selectors">🐘 🐧 🐼 ♥ ★ ℹ 💀 👌</p>
<p title="????????????♥★ℹ???????? with text variation selector 15">🐘︎ 🐧︎ 🐼︎ ♥︎ ★︎ ℹ︎ 💀︎ 👌︎</p>
<p title="????????????♥★ℹ???????? with emoji variation selector 16">🐘️ 🐧️ 🐼️ ♥️ ★️ ℹ️ 💀️ 👌️</p>
<p title="????????????♥★ℹ???????? with `text-shadow` hack" class="hack">🐘 🐧 🐼 ♥ ★ ℹ 💀 👌</p>
<p title="????????????♥★ℹ???????? with custom font" class="font">🐘 🐧 🐼 ♥ ★ ℹ 💀 👌</p>私は追加しました ？？？？ U + 1F480スカルと???? U + 1F44C OK Hand Sign。背景が「目」を通して見えるはずであり、コピーアンドペーストエラーに対してコードをより明確かつ堅牢にするために数字参照を使用したためです。
ただし、両方のバリエーションセレクターを任意のキャラクターに適用できることが提案されていますが、ほとんどの場合、効果はありません。一部のベンダー、特にSamsungはすでに出荷されています（デフォルト） 他のいくつかの文字の絵文字グリフ （goo.gl/a4yK6pまたはgoo.gl/DqtHcc）。
単色で塗りつぶすことができます：
p {
font-size: 20px;
color: transparent;
text-shadow: 0 0 0 blue;
}<p>????</p>
<p>????</p>
<p>????</p>または、それらを概説することができます：
body {
background: #fff;
}
p {
margin: 0;
color: transparent;
text-shadow: 0 0 3px blue;
font-size: 20px;
position: relative;
}
p::before {
content: attr(title);
position: absolute;
text-shadow: 0 0 0 #fff;
}<p title="????">????</p>
<p title="????">????</p>
<p title="????">????</p>これを自分でやりたかったので、最近、FirefoxとEdgeでも機能する新しいCSS効果を使用したソリューションを考え出しました。
フィルターを使用して、まずsepia（1）を使用して色を正規化し、次にそれを完全に飽和させて純粋な赤を取得します。黒い線を取り除きたい場合は、contrast（0）を使用して他のフィルターを適用する前に、絵文字からコントラストを吸い取ります。その後、hue-rotate（）を使用して、カラーホイールを赤から好きな色に回転させます。 ％ではなく小数値を使用しているため、値100は10000％を意味することに注意してください。
色相オフセットは、赤で始まるものとして定義されます。幸運なことに、セピアはほとんど赤なので、ホイールは0度で完全に始まります。 RGBからHSLへのコンバーターを使用して、必要なオフセットを計算できます。私はここでJavascriptで書かれた素敵なものを見つけました： https://web.archive.org/web/20180808220922/http://axonflux.com/handy-rgb-to-hsl-and-rgb-to- hsv-color-model-c
その関数から目的の結果を得るには、色相値に360を掛ける必要があります。例はrgbToHsl(0,100,100)[0]*360です。これは180を返します。赤がないため、これは予想される結果であり、赤から180度回転します。
Litherium an Crissovが指摘したように、テキスト絵文字もあります。これらは変換でよりよく機能し、多くの場合より良く見えます。ただし、テキスト絵文字に最初にinvert(.5)を適用するまで、上記で説明した方法を適用することはできません。これは、関数を操作するには何らかのシェードが必要だからです。したがって、各式の先頭にinvert(.5)を追加するだけで、すべてのブラウザーで両方のコードポイントを操作できるようになります。
.a { /* Normalize colour to a primary red */
filter: sepia(1) saturate(100);
}
.b { /* Less saturation so more features, shifted colour 90-degrees */
filter: sepia(1) saturate(5) hue-rotate(90deg);
}
.c { /* Remove black outlines if desired by removing contrast */
filter: contrast(0) sepia(1) saturate(100) hue-rotate(180deg);
}
.d { /* Other shades possible by lowering brightness */
filter: contrast(0) sepia(1) saturate(100) brightness(.05) hue-rotate(180deg);
}
.e { /* Weird possibilities with no colour normalization */
filter: contrast(100) hue-rotate(180deg);
}
.ma { /* Invert to provide a gray shade to apply sepia*/
filter: invert(.5) sepia(1) saturate(100);
}
div {
font-size: 25px;
}
.Emo > div::after {
content: "????⛄????????";
}
.mono > div::after {
content: "\1F30D\FE0E\26C4\FE0E\1F60D\FE0E\1F431\FE0E";
}<div class="Emo">
<div></div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
</div>
<span>Change the code point to text mode:</span>
<div class="mono">
<div class="a"></div>
<div class="ma"></div>
</div>更新：色相などを計算できる新しいパッケージがnpmで利用可能になりました。以前にリンクしていたWebサイトでそのスニペットを使用する必要はありません。以下に例を示します。 https://stackoverflow.com/a/56082323/5078765
すべてではありませんが、一部のコードポイントは、テキスト形式（非画像ベースのグリフ）または絵文字形式（画像ベースのグリフ）で描画できます。 Unicodeは、2つのバリエーションセレクターU + FE0E（VARIATION SELECTOR-15）またはU + FE0F（VARIATION SELECTOR-16）のいずれかを使用して、これら2つの形式を選択できることを説明しています。非画像ベースのフォームで描画される場合、color CSSプロパティが適用されます。
例：
U + 2603（SNOWMAN）は次のように描かれます：☃
コードポイントU + 2603 U + FE0Eのシーケンスは、次のように描画されます。☃︎
コードポイントのシーケンスU + 2603 U + FE0Fは、次のように描画されます。
これらのバリエーションシーケンスに参加するコードポイントの完全なリストと共に、詳細情報は http://unicode.org/emoji/charts/emoji-variants.html にあります。
（ベアコードポイントが使用されている場合、オペレーティングシステムによって異なるデフォルトが選択される場合があることに注意してください。たとえば、macOSとiOSでこの投稿を表示してみてください。
絵文字は非常に新しいため、スタイリングはまだネイティブでサポートされていません。
回避策は、 TwitterのTwemoji などの絵文字フォントを使用することです。その後、Font AwesomeまたはネイティブUnicodeのスタイル設定とほぼ同じ方法でスタイル設定できます。
絵文字内の詳細を保持する場合は、 filter: url(svg) を使用できます。ここで、url()は svgフィルター を取ります。
_svg {
display: none;
}
div {
-webkit-filter: url(#red);
filter: url(#red);
}__<svg>
<filter id="red">
<feColorMatrix type="matrix" values="
1 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0" />
</filter>
</svg>
<div>????????????</div>_feColorMatrixの使用は最初は困難に思えるかもしれませんが、実際には独自の色を定義するのは簡単です。赤色を表す次の例を取り上げます。
1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0
上からbold値を取得すると、RGBAカラーモードにどのように関連するかがわかります。
1-赤（r） 0-緑（g） 0-青（b） 1-アルファ（a）
ここで、各色は、0から255を255で割った値に関連しています。したがって、RGBAが次の緑の場合、
R G B A （0、255、0、1）
その場合、値は次のようになります。
0/255-> 0（r） 255/255-> 1（g） 0/255-> 0（b） 1-> 1（a）-分割しない
したがって、これらの値をマトリックスで使用すると、次のようになります。
0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 1 0
これを追加のフィルターとして追加（または古いフィルターを削除）してidを指定すると、css filter: url(#filterID)内で参照できるようになります。
以下の実装バージョンを参照してください。
_svg {
display: none;
}
.red {
-webkit-filter: url(#red);
filter: url(#red);
}
.green {
-webkit-filter: url(#green);
filter: url(#green);
}__<svg>
<filter id="red">
<feColorMatrix type="matrix" values="
1 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0" />
</filter>
<!-- \/ --- change id to be refrenced within css -->
<filter id="green">
<feColorMatrix type="matrix" values="
0 0 0 0 0
0 1 0 0 0
0 0 0 0 0
0 0 0 1 0" />
</filter>
</svg>
<div class="red">????????????</div>
<div class="green">????????????</div>_注意してください現在、このソリューションのブラウザサポートは非常に限られています。この機能でサポートされているブラウザの完全なリストを確認するには、 here をご覧ください。