表情符号在Chrome中以轮廓显示,如何修复

时间:2019-11-19 12:37:48

标签: html css emoji

我在css中复制了一个Google我的业务评论框,以提高性能,但是里面的表情符号显示为黑色轮廓。大概是父div中的某种样式引起了这种情况?

基于该假设,我尝试了全部使用css样式:unset;所有:初始; 这没有用。

Roboto中页面的默认字体,我以为Roboto可能奇怪地显示了表情符号,因此我尝试将所有表情符号的样式设置为Font-family:Sans-serif,然后设置为等宽字体。它们仍然无法正确显示。

这困扰着我网站上的多个页面,所以我很乐意提供一些建议。我需要表情符号才能正确显示。

它在Edge和Firefox中正确显示,所以我想知道是否有解决方案,但Google会升级Chrome。这不是好消息!

为样式EMOJIS寻找以下双ASTERIXS **,⭐&??

<div style="display:flex; border: 2px solid lightgray; background: white; border-radius: 10px; padding: 16px; line-height: 1.6em; font-size: 1em;">
    <div width="70px" height="70px">
    <div style="border-radius: 50%;
    width: 50px;
    height: 50px;

    text-align: center;
    padding-top: 10px;
    background: #C21C5E;
    line-height: 100%;
    font-size: 28px; color: white; font-weight: 400;">
  A</div></div>

<div style="display: inline-block; margin-left: 16px; float: right;  letter-spacing: 1px; font-size: 0.95em;">
  <div style="width: 100%; font-size: 1.1em; font-weight: ">Angela Bowen</div>
  <div style="width: 100%; font-size: 0.95em; line-height: 0.95em; color: gray">10 reviews</div>

  **<div style="color: unset; width: 100%; margin-top: 1.2em; font-size: 0.8em; letter-spacing: 3px;">⭐⭐⭐⭐⭐</div>**
    This is my second Harry Potter tour in Edinburgh and... 
**<span style="color: unset; background-color: unset; border: unset; background: unset;">??</span>**
  </div>
</div>
</span>

0 个答案:

没有答案