Unicode表情符號的顏色

在現代瀏覽器中可以包含表情符號，但是如何讓它成爲單一顏色並選擇該顏色？Unicode表情符號的顏色

例如，下面是一些表情符號和一些常規（平面0）Unicode符號。所有應該是紅色的，但只有符號呈現紅色。

<p> 
    
</p> 
<p> 
    ♥★ℹ 
</div> 

p { 
    font-size: 3em; 
    color: red 
}

來源

2015-09-05 mahemoff

以下全部答案在Firefox和Edge中都不起作用 –

是的，你可以給它們着色！

div { 
 
    color: transparent; 
 
    text-shadow: 0 0 0 red; 
 
}

<div></div>

來源

2016-09-29 17:13:51 Tigran

不錯！我將它轉換爲堆棧片段。不幸的是，這隻能做剪影，因爲沒有真正的透明編碼。所以例如笑臉呈現一樣的鬼臉。懷疑我們可以做很多事情。 – mahemoff

這是Mac獨佔的:-P，因爲它不適用於Windows 10（在任何瀏覽器中）。 –

謝謝，mahemoff。你是對的，一些更復雜的表情看起來很差，但是對於其中的大多數來說，它們幾乎沒有區別。畢竟，這是我們能做的最好的。 @ŠimeVidas，我自己在Windows 10上，Chrome 53. – Tigran

由於表情是相當新的，它的造型還沒有原生支持。

解決方法是使用表情符號字體，如Twitter's Twemoji。然後它的樣式可以與Font Awesome或Native Unicode的樣式相同。

來源

2015-09-05 13:42:04 mahemoff

您可以用純色填充它們：

p { 
 
    font-size: 20px; 
 
    color: transparent; 
 
    text-shadow: 0 0 0 blue; 
 
}

<p></p> 
 
<p></p> 
 
<p></p>

或者你CA ñ概括他們：

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>

來源

2016-09-30 15:55:04

我更喜歡在大綱中使用其他屬性，例如'name'，以便用戶使用表情符號時不會顯示在工具提示中。很好的答案！ –

並不是每一個表情符的工作原理相同。一些是舊的文本符號，現在有一個（可選或默認）豐富多彩的表示形式，其他一些明確（僅）作爲emojis。這意味着，一些Unicode代碼點應該有兩種可能的表示形式，text和emoji。作者和用戶應該能夠表達他們對這兩者的偏好。目前使用U + FE0E（text，VS-15）和U + FE0F（emoji，VS-16）以不可見variation selectors，但已提出higher-level solutions (e.g. for CSS)。

文字風格的表情符號是單色的，應該像CSS中的currentcolor一樣以前景色顯示，就像其他字形一樣。 Unicode聯盟提供了一個overview of emojis by style（beta version）。您應該可以在HTML中追加︎以選擇文本變體，並在標有「默認文本樣式; 有VSs「和」默認表情符號樣式; 有VS「。儘管如此，這還不包括emojis和其他許多例子。

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">&#x1F418; &#x1F427; &#x1F43C; &#x2665; &#x2605; &#x2139; &#x1F480; &#x1F44C;</p> 
 
<p title="♥★ℹ with text variation selector 15">&#x1F418;&#xFE0E; &#x1F427;&#xFE0E; &#x1F43C;&#xFE0E; &#x2665;&#xFE0E; &#x2605;&#xFE0E; &#x2139;&#xFE0E; &#x1F480;&#xFE0E; &#x1F44C;&#xFE0E;</p> 
 
<p title="♥★ℹ with emoji variation selector 16">&#x1F418;&#xFE0F; &#x1F427;&#xFE0F; &#x1F43C;&#xFE0F; &#x2665;&#xFE0F; &#x2605;&#xFE0F; &#x2139;&#xFE0F; &#x1F480;&#xFE0F; &#x1F44C;&#xFE0F;</p> 
 
<p title="♥★ℹ with `text-shadow` hack" class="hack">&#x1F418; &#x1F427; &#x1F43C; &#x2665; &#x2605; &#x2139; &#x1F480; &#x1F44C;</p> 
 
<p title="♥★ℹ with custom font" class="font">&#x1F418; &#x1F427; &#x1F43C; &#x2665; &#x2605; &#x2139; &#x1F480; &#x1F44C;</p>

我添加U + 1F480骷髏和U + 1F44C OK手簽名，因爲背景應該顯示通過他們的「眼睛」，我已經使用數字字符引用只是爲了讓代碼更加明顯，並且對複製粘貼錯誤更強大。

然而，已經提出，兩個變化選擇器可以應用於任何角色，這在大多數情況下不會起作用。請注意，一些供應商，特別是三星，已經發貨（默認）emoji glyphs for several other characters（goo.gl/a4yK6p或goo.gl/DqtHcc）。

來源

2016-10-13 12:08:50 Crissov

一些但不是全部的代碼點可以以文本形式（非基於圖片的字形）或表情符號形式（基於圖片的字形）繪製。 Unicode描述了可以通過使用兩個變體選擇器之一來選擇這兩種形式：U + FE0E（VARIATION SELECTOR-15）或U + FE0F（VARIATION SELECTOR-16）。當以非基於圖片的形式繪製時，應該使用color CSS屬性。

實施例：

U + 2603（雪人）被繪製這種方式：☃

的代碼點U + 2603 U + FE0E序列被繪製這種方式：☃︎

序列的代碼點U + 2603 U + FE0F繪製這種方式：☃️

更多信息，與參與這些變異序列的碼點的一個完整的列表一起，可以在http://unicode.org/emoji/charts/emoji-variants.html

中找到

（請注意，使用裸碼點時，不同的操作系統可能會選擇不同的默認值。例如，嘗試查看該職位在MacOS和iOS的 - 上面的裸碼點看起來不同）

來源

2016-10-15 16:51:52 Litherum

-2

如果需要使用後的CSS，before僞元素，您CAN PROCED喜歡這個

<span class="react-thumb-fly" title="Aimé"> 
    <button class="react-toggle-icon-thumb"></button> 
</span>

然後寫！此爲CSS

.react-toggle-icon-thumb { 
    width: 20pt; 
    height: 20pt; 
    font-size: 30pt; 
    position: relative; 
    color: gray; 
    cursor: pointer; 
    border: none; 
    background: transparent; 
    margin-left: 0px; 
    margin-right: 8px; 
    top: -0px; 
} 
.react-toggle-icon-thumb:before, .react-toggle-icon-thumb:after { 
    position: absolute; 
    top: 0; 
    left: 0; 
    transition: all .3s ease-out; 
    content: ""; 
    font-family: fontawesome; 
    color: transparent; 
text-shadow: 0 0 0 #3498db; 
} 

.react-toggle-icon-thumb:hover:before { 
    transform: scale(1.2); 
    animation: thumbs-up 2s linear infinite; 
} 

@keyframes thumbs-up { 
25% { 
    transform: rotate(20deg); 
} 
50%, 100% { 
    transform: rotate(5deg); 
} 
}

來源

2017-08-07 07:05:31

Unicode表情符號的顏色

回答

相關問題