javascript - 如何设置Unicode字符的样式？

This question already has answers here:

Color for Unicode Emoji
                                
                                    （8个答案）
                                
                        
                        
                            Grey out emoji characters (HTML / CSS)
                                
                                    （2个答案）
                                
                        
                                2个月前关闭。
            
                    
我想设置unicode character DROPLET（💧）的样式，特别是将蓝色更改为其他颜色。

.red {
  color: red;
  background-color: yellow;
}

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

将应用yellow样式，但不应用字符的颜色（正确设置了文本样式）。

是否可以设计任何Unicode字形？

最佳答案

您可以尝试使用filter

.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>