字体超过字体奇怪的边框

Question

我有2个字体图标。 它们绝对位于彼此之上。 假设图标-A 在图标-B 上方。 图标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

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

或者您可以通过将其中一个与 <ControlTemplate x:Key="MenuBarItem" TargetType="{x:Type MenuItem}"> <Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" Background="{TemplateBinding Background}" SnapsToDevicePixels="True"> <Grid VerticalAlignment="Center"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/> <Path x:Name="GlyphPanel" Data="F1M10,1.2L4.7,9.1 4.5,9.1 0,5.2 1.3,3.5 4.3,6.1 8.3,0 10,1.2z" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Margin="3" Visibility="Collapsed" VerticalAlignment="Center"/> <ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> <Popup x:Name="PART_Popup" AllowsTransparency="True" Focusable="False" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Bottom"> <Border x:Name="SubMenuBorder" BorderBrush="SlateGray" BorderThickness="1" Background="#FF2D2D30" Padding="2"> <ScrollViewer x:Name="SubMenuScrollViewer" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}"> <Grid RenderOptions.ClearTypeHint="Enabled"> <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0"> <Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=SubMenuBorder}" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/> </Canvas> <Rectangle Fill="#FFD7D7D7" HorizontalAlignment="Left" Margin="29,2,0,2" Width="1"/> <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/> </Grid> </ScrollViewer> </Border> </Popup> </Grid> </Border> <ControlTemplate.Triggers> <Trigger Property="IsSuspendingPopupAnimation" Value="True"> <Setter Property="PopupAnimation" TargetName="PART_Popup" Value="None"/> </Trigger> <Trigger Property="Icon" Value="{x:Null}"> <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/> </Trigger> <Trigger Property="IsChecked" Value="True"> <Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/> <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/> </Trigger> <Trigger Property="IsHighlighted" Value="True"> <Setter Property="Background" TargetName="templateRoot" Value="SlateGray"/> <Setter Property="BorderBrush" TargetName="templateRoot" Value="SlateGray"/> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="#FF707070"/> <Setter Property="Fill" TargetName="GlyphPanel" Value="#FF707070"/> </Trigger> <Trigger Property="CanContentScroll" SourceName="SubMenuScrollViewer" Value="False"> <Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=SubMenuScrollViewer}"/> <Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=SubMenuScrollViewer}"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> 放在一起来解决此问题？

编辑：嗯，它们的大小相同，但是问题可能是颜色使字体更宽……将红色的字体放在灰色的字体上方时，我不再看到灰色的字体了……

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