В современных браузерах можно включать символы Emoji, но как можно сделать один цвет и выбрать этот цвет?Цвет для Unicode Emoji
Например, некоторые Emoji и некоторые обычные символы (плоскость 0) Unicode. Все должно быть красным, но только символы отображаются красным цветом.
Associated HTML + CSS:
<p>
</p>
<p>
♥★ℹ
</div>
p {
font-size: 3em;
color: red
}
Да, вы можете покрасить их!
div {
color: transparent;
text-shadow: 0 0 0 red;
}<div></div>Nice one! Я преобразовал его в фрагмент стека. К сожалению, это может сделать только силуэты, поскольку нет реальной кодировки для прозрачности. Так, например, смайлик делает то же самое, что и гримаса. Сомневаюсь, что мы сможем многое сделать. – mahemoff
Является ли это эксклюзивным Mac: -P, потому что он не работает в Windows 10 (в любом браузере). –
Спасибо, mahemoff. Вы правы, некоторые из более сложных смайликов будут выглядеть плохо, но для большинства из них это мало или совсем не отличается. И в конце концов, это лучшее, что мы можем сделать. @ ŠimeVidas, я сам на Windows 10, Chrome 53. – Tigran
Как Emoji совершенно новый, укладка она не поддерживается изначально.
Обходным способом является использование шрифта Emoji, такого как Twitter's Twemoji. Тогда его можно охарактеризовать так же, как стиль шрифта Awesome или родной Unicode.
Вы можете заполнить их сплошным цветом:
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>Я предпочитаю использовать другой атрибут, такой как 'name' для контура, так что когда пользователи имеют emoji, он не отображается в подсказке. Отличный ответ! –
Не каждый смайликов работает так же. Некоторые из них представляют собой старые текстовые символы, которые теперь имеют (необязательное или по умолчанию) красочное представление, другие были явно (только) как emojis. Это означает, что некоторые кодеки Unicode должны иметь два возможных представления: text и emoji. Авторы и пользователи должны быть в состоянии выразить свое предпочтение тому или другому. В настоящее время это делается в противном случае невидимым variation selectors U + FE0E (text, VS-15) и U + FE0F (emoji, VS-16), но higher-level solutions (e.g. for CSS).
Текстовые эмуляторы монохромные и должны отображаться в цветном переднем плане, то есть currentcolor в CSS, как и любой другой символ. Консорциум Unicode предоставляет overview of emojis by style (beta version). Вы должны иметь возможность добавить ︎ в HTML, чтобы выбрать текстовый вариант с чем-либо в столбцах с надписью «Стиль текста по умолчанию; имеет VSs "и" По умолчанию Emoji Style; имеет VSs ". Это не включает пример 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 знак рука, потому что фон должен показать через свой «глаз», и я использовал числовые ссылки на символы просто сделать кода более очевидным и более надежным в отношении ошибок копирования и вставки.
Было высказано предположение, что оба вариатора могут применяться к любому персонажу, что в большинстве случаев не будет иметь никакого эффекта. Обратите внимание, что некоторые поставщики, особенно Samsung, уже отправляют (по умолчанию) emoji glyphs for several other characters (goo.gl/a4yK6p или goo.gl/DqtHcc).
Некоторые, но не все, кодовые точки могут быть нарисованы либо в текстовой форме (не на основе изображения), либо в форме emoji (на основе изображения). Unicode описывает, что эти две формы могут быть выбраны с использованием одного из двух селекторов вариаций: либо U + FE0E (VARIATION SELECTOR-15), либо U + FE0F (VARIATION SELECTOR-16). При рисовании в форме, отличной от картинки, должно применяться свойство CSS color.
Пример:
U + 2603 (СНЕГОВИКА) обращается так: ☃
Последовательность кодовых точек U + 2603 U + FE0E рисуется таким образом: ☃︎
Последовательность кодовых точек U + 2603 U + FE0F рисуется следующим образом: ☃️
более подробная информация, наряду с полным списком кодовых точек, которые участвуют в этих вариаций последовательностей, можно найти на http://unicode.org/emoji/charts/emoji-variants.html
(Обратите внимание, что при использовании голосовой кодовой точки разные операционные системы могут выбирать разные значения по умолчанию. Например, попробуйте просмотреть этот пост в MacOS и прошивке - голая точка выше код выглядит иначе)
Если вам нужно использовать CSS после, до Псевдо ЭЛЕМЕНТА ВЫ МОЖЕТЕ 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 –