如何设置 unicode 字符的样式？

Question

我想为unicode 字符 DROPLET (💧)设置样式，特别是将蓝色更改为其他颜色。.red {  color: red;  background-color: yellow;}<span class="red">DROPLET 💧</span>该yellow样式将应用于但性格没有色彩（文本是正确称呼）。是否可以对任何 unicode 字形进行样式设置？

Answer 1

您可以尝试使用过滤器

.red {

  color: red;

  background-color: yellow;

}

.red > span {

   filter: hue-rotate(180deg) saturate(10);

}

<span class="red">DROPLET <span>💧</span></span>

或者 mix-blend-mode 但这也会影响背景：

.red {

  background:#fff;

  position:relative;

  display:inline-block;

}

.red > span {

  filter:brightness(0); /* We make the icon black */

}

.red:before {

   content:"";

   position:absolute;

   top:0;

   left:0;

   right:0;

   bottom:0;

   background:red;

   pointer-events:none;

   mix-blend-mode:lighten; /* this will make the icon red since red is more "light" than black*/

    z-index: 1;

}

<span class="red">DROPLET <span>💧</span></span>