Symbol font glyphs rendered thicker in avalonia
See original GitHub issueDescribe the bug Glyphs in symbol fonts (Segoe Fluent Icons, Segoe MDL2 Assets, etc.) are rendering thicker than they should be in Avalonia (TextBlock/TextLayout and FormattedText). Using Skia in a custom draw op renders them correctly to appear much closer to how they should. SkiaSharp version is whatever ships with Avalonia (I’m not using my own ref here). This also isn’t new to the new text engine for 11.0, but I just discovered it’s not just an issue with my custom font (based on the open source Fluent UI Icons) but also with the other MS fonts.
1920x1080 display, normal 100% scaling
The glyph is \uE8BB
from either of the Segoe icon fonts (same as the native close button everywhere on Windows)
Xaml
<Viewbox Width="10"
Height="10"
Grid.Column="1">
<TextBlock Name="ButtonIcon"
FontFamily="Segoe Fluent Icons"
FontSize="12"
Text=""
Foreground="White"/>
</Viewbox>
<Viewbox Width="10"
Height="10"
Grid.Column="1" Grid.Row="1">
<local:SkiaTextBlock />
</Viewbox>
The Skia CustomDrawOp (SkiaTextBlock)
var tf = SKTypeface.FromFamilyName("Segoe Fluent Icons");
Font = new SKFont
{
Subpixel = true,
Edging = SKFontEdging.SubpixelAntialias,
Hinting = SKFontHinting.Full,
LinearMetrics = true,
Typeface = tf,
Size = 12
};
public void Render(IDrawingContextImpl context)
{
var api = context.GetFeature<ISkiaSharpApiLeaseFeature>();
using var lease = api.Lease();
var dc = lease.SkCanvas;
var txt = "\uE8BB";
using var paint = new SKPaint(Font);
paint.Style = SKPaintStyle.StrokeAndFill;
paint.Color = SKColors.White;
SKRect bnds = default;
paint.MeasureText(txt, ref bnds);
var cx = (float)Bounds.Center.X;
var cy = (float)Bounds.Center.Y;
dc.DrawText(txt, cx - (bnds.Width / 2), cy - (bnds.Height / 2) + bnds.Height, paint);
}
To Reproduce Steps to reproduce the behavior:
- Go to ‘…’
- Click on ‘…’
- Scroll down to ‘…’
- See error
Expected behavior A clear and concise description of what you expected to happen.
Screenshots If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
- OS: Windows
- Version 11.0
Additional context Add any other context about the problem here.
Issue Analytics
- State:
- Created a year ago
- Comments:8 (8 by maintainers)
Top GitHub Comments
Y that is the only option to somehow reliably detect such font. The other option is to provide TextRenderOptions that allow you to disable anti-aliasing in some context. I might just go for implementing TextRenderOptions.
It does not. TextBlock still renders the lines too fat. My SymbolIcons look slightly better if the glyph is small enough, but with cleartype there some visual artifacts with the anti-aliasing. I still think these glyphs need to be rendered without anti-aliasing so something like
TextRenderOptions
is still needed.