「译」有时回变成表情符号的文字

最新推荐文章于 2024-09-07 13:23:12 发布

33子～

最新推荐文章于 2024-09-07 13:23:12 发布

阅读量173

点赞数

分类专栏：译文

本文链接：https://blog.csdn.net/weixin_46254175/article/details/116135900

版权

译文专栏收录该内容

2 篇文章 0 订阅

订阅专栏

原文
原作者：Chris Coyier
译者：33子～

有些浏览器只是决定一些Unicode字符会为你变成表情符号。我不能确切的告诉你为什么，但是在这我看到了：
在这里插入图片描述
这些Unicode字符（▶, ↩, and, ❤）在谷歌上以文本展示，在iOS浏览器上他们会转变成表情。注意当他们是文本的时候，我有能力改变它们的颜色，但是当变成表情的时候不能。

我发现他们因为当我在帮助某些人做网站的时候，他们告诉我不喜欢展示的“红色的钻石”。直到在我的手机上我才看到它们。

文本表示选择器

有几个人向我指出如果你使用(︎︎︎) 在字符前面，它将会“请求它被当作文本来渲染”，这是说明
但是我不能让它工作。

更新！它不再前面，它支持在后面！就像❤︎︎ 它似乎在我的iOS上工作了。

这是我的测试：

<div>
  ▶
  <br>
  ↩
  <br>
  ❤
</div>

<div>
  ▶
  <br>
  ↩
  <br>
  ❤
</div>

<!-- make sure the "Text Presentation Selector" is AFTER not BEFORE the special character. -->
<div>
  ▶&#xFE0E;
  <br>
  ↩&#xFE0E;
  <br>
  ❤&#xFE0E;
</div>

<div>
  ▶
  <br>
  ↩
  <br>
  ❤
</div>

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的例子：

&#9830;
&#x2666;
&diamondsuit;

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;
  }
}

<ul>
  <li><span class=icon>🚲</span>   Bicycles</li>
  <li><span class=icon>✈️</span>   Planes</li>
  <li><span class=icon>🚂</span>   Trains</li>
</ul>
<ul>
  <li><span class=icon>📥</span>   Inbox</li>
  <li><span class=icon>📤</span>   Outbox</li>
  <li><span class=icon>📁</span>   Folder</li>
</ul>