Colore per Unicode Emoji

Question

È possibile includere caratteri Emoji nei browser moderni, ma come si può renderlo un unico colore e scegliere quel colore?

Ad esempio, ecco alcuni simboli Emoji e alcuni normali (piano 0) Unicode. Tutto dovrebbe essere rosso, ma solo i simboli sono resi in rosso.

Associated HTML + CSS:

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

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

Answer 1

Sì, puoi colorarli!

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

<div></div>

Answer 2

Come Emoji è abbastanza nuovo, styling non è ancora supportata in modo nativo.

La soluzione alternativa consiste nell'utilizzare un carattere Emoji come Twitter's Twemoji. Quindi può essere stilizzato nello stesso modo in cui Font Awesome o Unicode nativo può essere disegnato.

Answer 3

Si possono riempire con un colore a tinta unita:

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

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

Oppure si CA n li delineare:

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>

Answer 4

Non ogni emoji funziona lo stesso. Alcuni sono vecchi simboli testuali che ora hanno una rappresentazione colorata (facoltativa o predefinita), altri erano esplicitamente (solo) come emoji. Ciò significa che alcuni codepoint Unicode dovrebbero avere due possibili rappresentazioni, text e emoji. Gli autori e gli utenti dovrebbero essere in grado di esprimere la propria preferenza per l'uno o l'altro. Al momento questo viene eseguito con variation selectors altrimenti + invisibile U + FE0E (text, VS-15) e U + FE0F (emoji, VS-16), ma è stato proposto higher-level solutions (e.g. for CSS).

Gli emoji in stile testo sono monocromatici e devono essere visualizzati nel colore di primo piano, ovvero currentcolor in CSS, proprio come qualsiasi altro glifo. Il Consorzio Unicode fornisce uno overview of emojis by style (beta version). Dovresti essere in grado di aggiungere ︎ in HTML per selezionare la variante testuale con qualsiasi cosa nelle colonne con l'etichetta "Stile di testo predefinito; ha VSs "e" Stile Emoji predefinito; ha VSs ". Questo non include l'esempio di emoji e molti altri, comunque.

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>

Ho aggiunto U + 1F480 Teschio e U + 1F44C OK Gesto con la mano, perché il fondo dovrebbe mostrare attraverso i loro “occhi” e ho usato riferimenti a caratteri numerici solo per fare il codice più ovvio e più efficace contro gli errori di copia e incolla.

È stato proposto, tuttavia, che entrambi i selettori di variazione possano essere applicati a qualsiasi carattere, il che non avrebbe alcun effetto nella maggior parte dei casi. Si noti che alcuni fornitori, in particolare Samsung, sono già in vendita (impostazione predefinita) emoji glyphs for several other characters (goo.gl/a4yK6p o goo.gl/DqtHcc).

Answer 5

Alcuni, ma non tutti, i punti di codice possono essere disegnati in forma di testo (glifo non basato su immagine) o forma emoji (glifo basato su immagine). Unicode descrive che queste due forme possono essere selezionate usando uno dei due selettori di variazione: U + FE0E (VARIATION SELECTOR-15) o U + FE0F (VARIATION SELECTOR-16). Quando viene disegnato in un modulo non basato su immagine, è necessario applicare la proprietà CSS color.

Esempio:

U + 2603 (NEVE) è disegnato in questo modo: ☃

La sequenza di punti di codice U + 2603 + U FE0E è disegnato in questo modo: ☃︎

La sequenza di punti di codice U + 2603 + U FE0F è disegnato in questo modo: ☃️

Ulteriori informazioni, insieme a un elenco completo dei punti di codice che fanno parte di tali sequenze di variazione, è disponibile sul http://unicode.org/emoji/charts/emoji-variants.html

(si noti che diversi sistemi operativi possono scegliere un valore predefinito diverso quando viene utilizzato il punto di codice nudo. Ad esempio, provare la visualizzazione di questo post in MacOS e iOS - il punto di codice a barre sopra appare diverso)

Answer 6

SE DOVETE usare i CSS DOPO, PRIMA DI PSEUDO ELEMENTO PUOI proced COME QUESTO

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

Quindi scrivere! QUESTO PER 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); 
} 
}