字体奇怪边框上的字体

Question

我有2个字体图标。它们绝对位于其他之上。让我们说icon-A高于icon-B。 Icon-B永远不可见。

不知何故，图标-A是可见的。奇怪的边界是可见的。有人可以解释我为什么以及如何解决这个问题？

HTML：

<div>
  <i class="fa fa-star"></i>
  <i class="fa fa-star"></i>
</div>

SCSS：

div {
  position: relative;
  font-size: 200px;

  i {
    color: red;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 11;

    &:last-child {
      z-index: 11;
      color: #ddd;
    }
  }
}

这是codepen：https://codepen.io/balancana/pen/mvRKPM https://codepen.io/balancana/pen/mvRKvK

我认为问题不在于字体，因为我也尝试过其他字体。

预习：

Answer 1

字体图标的大小是否完全相同？因为看起来它们处于相同位置所以应该没有问题......

或者也许你可以通过将其中一个与visibility: hidden;解决这个问题？

编辑：嗯，他们是相同的大小，但问题可能是颜色使字体更宽...当把红色的一个放在灰色的上面时，我不再看到灰色了...

Answer 2

假设目标是能够制造半星，我看到2个解决方案：

• 将较暗的颜色放在前面（例1和2）
• 使较暗的颜色稍微变暗，这是不明显的（例子3和4）

div#test1 {
  position: relative;
  font-size: 200px;
}
div#test1 i {
  color: #ddd;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 11;
}
div#test1 i:last-child {
  z-index: 11;
  color: red;
}

div#test2 {
  position: relative;
  font-size: 200px;
}
div#test2 i {
  color: #ddd;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 11;
}
div#test2 i:last-child {
  z-index: 11;
  color: red;
  width: 100px;
  overflow: hidden;
}



div#test3 {
  position: relative;
  font-size: 196px;
}
div#test3 i {
  color: red;
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 11;
}
div#test3 i:last-child {
  z-index: 11;
  font-size: 200px;
  top: 0;
  left: 0;
  color: #ddd;
}



div#test4 {
  position: relative;
  font-size: 196px;
}
div#test4 i {
  color: red;
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 11;
}
div#test4 i:last-child {
  z-index: 11;
  font-size: 200px;
  top: 0;
  left: 0;
  color: #ddd;
  width: 100px;
  overflow: hidden;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="test1">
  <i class="fa fa-star"></i>
  <i class="fa fa-star"></i>
</div>
<div style="height: 200px;"></div>
<div id="test2">
  <i class="fa fa-star"></i>
  <i class="fa fa-star"></i>
</div>
<div style="height: 200px;"></div>
<div id="test3">
  <i class="fa fa-star"></i>
  <i class="fa fa-star"></i>
</div>
<div style="height: 200px;"></div>
<div id="test4">
  <i class="fa fa-star"></i>
  <i class="fa fa-star"></i>
</div>

Answer 3

最让我帮助的是：-webkit-text-stroke-width: 0.01em;

它不是稳定的完整（可能是此css属性的未来更改）并且它不适用于IE。

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke-width