在現代瀏覽器中可以包含表情符號,但是如何讓它成爲單一顏色並選擇該顏色?Unicode表情符號的顏色
例如,下面是一些表情符號和一些常規(平面0)Unicode符號。所有應該是紅色的,但只有符號呈現紅色。
相關HTML + CSS:
<p>
</p>
<p>
♥★ℹ
</div>
p {
font-size: 3em;
color: red
}
在現代瀏覽器中可以包含表情符號,但是如何讓它成爲單一顏色並選擇該顏色?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>
由於表情是相當新的,它的造型還沒有原生支持。
解決方法是使用表情符號字體,如Twitter's Twemoji。然後它的樣式可以與Font Awesome或Native Unicode的樣式相同。
您可以用純色填充它們:
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>
我更喜歡在大綱中使用其他屬性,例如'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">🐘 🐧 🐼 ♥ ★ ℹ 💀 👌</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手簽名,因爲背景應該顯示通過他們的「眼睛」,我已經使用數字字符引用只是爲了讓代碼更加明顯,並且對複製粘貼錯誤更強大。
然而,已經提出,兩個變化選擇器可以應用於任何角色,這在大多數情況下不會起作用。請注意,一些供應商,特別是三星,已經發貨(默認)emoji glyphs for several other characters(goo.gl/a4yK6p
或goo.gl/DqtHcc
)。
一些但不是全部的代碼點可以以文本形式(非基於圖片的字形)或表情符號形式(基於圖片的字形)繪製。 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的 - 上面的裸碼點看起來不同)
如果需要使用後的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);
}
}
以下全部答案在Firefox和Edge中都不起作用 –