原文 原作者：Chris Coyier 译者：33子～
有些浏览器只是决定一些Unicode字符会为你变成表情符号。我不能确切的告诉你为什么，但是在这我看到了： 这些Unicode字符（▶, ↩, and, ❤）在谷歌上以文本展示，在iOS浏览器上他们会转变成表情。注意当他们是文本的时候，我有能力改变它们的颜色，但是当变成表情的时候不能。
我发现他们因为当我在帮助某些人做网站的时候，他们告诉我不喜欢展示的“红色的钻石”。直到在我的手机上我才看到它们。
文本表示选择器
有几个人向我指出如果你使用(︎︎︎) 在字符前面，它将会“请求它被当作文本来渲染”，这是说明 但是我不能让它工作。
更新！它不再前面，它支持在后面！就像❤︎︎ 它似乎在我的iOS上工作了。
这是我的测试：
▶
↩
❤
▶
↩
❤
▶︎
↩︎
❤︎
▶
↩
❤
div:nth-child(2) {
color: red;
}
div:nth-child(4) {
font-family: monospace;
}
body {
display: flex;
gap: 2rem;
padding: 2rem;
}
我在iOS上看到： 我在一些帖子上读到，font-family: monospace 也会阻止表情符号的转换，但是我也没工作（尽管我被告知它特别适用iPadOS）。
让它成为一个表情，但是无论如何强迫颜色。
如果你可以选择这个元素，即时这个字符变成表情，你可以强迫它的一个颜色。这是一个来自于 Andrew Walpolea的例子：
♦
♦
♦
body {
font-size:3rem;
/*filter: grayscale(100%) brightness(0%);*/
filter: saturate(0%) brightness(50%);
}
Preethi Sam在博客中写到你也可以使用text-shadow 来做同样的事情。
.icon {
color: transparent;
text-shadow: 0 0 #ec2930;
}
ul {
list-style: none;
font: 20pt "crimson text";
display: inline-block;
padding: 40px;
height: auto;
width: max-content;
width: -moz-max-content;
width: -webkit-max-content;
color: #444;
background-color: #f1ec37;
box-shadow: 0 0 2px lightpink;
text-align: left;
margin: 10px 0 0 0;
}
ul:first-child {
margin-right: 30px;
}
li {
white-space: pre;
margin-bottom: 6px;
}
body {
text-align: center;
}
@supports not ((width: -moz-max-content) or (width: -webkit-max-content) or (width: max-content)) {
ul {
width: 100px;
}
}
- 🚲 Bicycles
- ✈️ Planes
- 🚂 Trains
- 📥 Inbox
- 📤 Outbox
- 📁 Folder
在我的情况中没有选择器可以使用！我找不到的钻石在数据库中有上百个随机帖子。
管他呢
我只是放弃了，然后在整个数据库上运行MySQL搜索/替换来摆脱他们。
Matias Singers在“Unicode symbol as text or emoji”中有更多关于这方面的内容。链接