WPF中Arial Black字体Run文本背景重叠问题求助

问题概述 #

在基于.NET Framework 4.8的WPF应用中，当TextBlock包含两个Run元素时，若下方Run使用Arial Black字体，其背景会向上覆盖上方的Run区域。使用普通Arial或其他字体时无此问题，且仅在设置Run背景时出现重叠，推测是WPF对Arial Black字体的背景尺寸计算存在异常。

现象说明 #

• 普通Arial字体：上下两个Run的红色背景各自独立，无重叠
• Arial Black字体：下方大字号Run的红色背景会覆盖上方小字号Run的部分区域

重现代码 #

后台C#代码 #

Run run = new Run("Size 16px______\n");
Run run2 = new Run("Size 48px");
// 取消注释以下两行切换至Arial Black以重现问题
//run.FontFamily = new FontFamily("Arial Black");
//run2.FontFamily = new FontFamily("Arial Black");
run.FontFamily = new FontFamily("Arial");
run2.FontFamily = new FontFamily("Arial");
run.FontSize = 16;
run2.FontSize = 48;
Color color = Colors.Red;
run.Background = new SolidColorBrush(color);
run2.Background = new SolidColorBrush(color);
textBlock.Inlines.Add(run);
textBlock.Inlines.Add(run2);

XAML代码 #

<Grid>
    <TextBlock x:Name="textBlock"></TextBlock>
</Grid>

解决方案 #

方案1：强制设置LineHeight #

通过为TextBlock或单个Run设置固定LineHeight，约束背景区域的垂直范围：

// 为TextBlock设置全局行高
textBlock.LineHeight = 52; // 根据大字号Run的尺寸调整

// 或单独为每个Run设置
run.LineHeight = 20;
run2.LineHeight = 52;

方案2：使用InlineUIContainer包裹Run #

将每个Run放入TextBlock内的InlineUIContainer，手动控制每个文本块的布局：

// 第一个Run
var container1 = new InlineUIContainer();
container1.Child = new TextBlock(new Run("Size 16px______\n") { 
    FontFamily = new FontFamily("Arial Black"), 
    FontSize = 16, 
    Background = new SolidColorBrush(Colors.Red) 
});

// 第二个Run
var container2 = new InlineUIContainer();
container2.Child = new TextBlock(new Run("Size 48px") { 
    FontFamily = new FontFamily("Arial Black"), 
    FontSize = 48, 
    Background = new SolidColorBrush(Colors.Red) 
});

textBlock.Inlines.Add(container1);
textBlock.Inlines.Add(container2);

方案3：替代字体 #

用Arial Bold替代Arial Black，既能保留粗体效果，又可避免该布局bug：

run.FontFamily = new FontFamily("Arial Bold");
run2.FontFamily = new FontFamily("Arial Bold");

内容的提问来源于stack exchange，提问作者Chase Christiansen