Different font display

[Miaoyww]

Describe the bug

I'm using MiSans as my app font, however, it doesn't display the same.

like the hitokoto card, it looks pretty normal

            <StackPanel Grid.Column="0">
                <TextBlock x:Uid="HitokotoCard"
                           Style="{StaticResource CommonTextStyle}"
                           Foreground="{StaticResource CommonTextColor}"
                           FontWeight="Medium" FontSize="25"
                           VerticalAlignment="Center" />
                <TextBlock Text="HITOKOTO" FontSize="20"
                           Style="{StaticResource EnglishTextStyle}" 
                           VerticalAlignment="Center" />
            </StackPanel>
            <RichTextBlock Grid.Column="1" Margin="30,0,0,0" VerticalAlignment="Center" Width="400"
                           Style="{StaticResource CommonRichTextStyle}" MaxLines="2"
                           Foreground="{StaticResource CommonTextColor}">
                <Paragraph>
                    <Run Text="{x:Bind ViewModel.Hitokoto, Mode=OneWay}" />
                </Paragraph>
            </RichTextBlock>

Why they just looks so different? The following has such a bad looking.

          <TextBlock Name="IndexTextBlock" Grid.Column="0" Text="{x:Bind ViewModel.Index, Mode=OneWay}"
                     Style="{StaticResource CommonTextStyle}"
                     HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,20,0"
                     Padding="0"
                     FontWeight="Light" />

          <Border Grid.Column="1" Name="CoverBorder" Background="{x:Bind ViewModel.Cover, Mode=OneWay}"
                  HorizontalAlignment="Left" VerticalAlignment="Center" Margin="2"
                  Width="55" Height="55"
                  BorderThickness="0" CornerRadius="5" />
          <StackPanel Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Stretch"
                      Margin="20,2,0,0">
              <Grid>
                  <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="Auto" />
                      <ColumnDefinition Width="Auto" />
                  </Grid.ColumnDefinitions>
                  <TextBlock Grid.Column="0" Name="NameTextBlock" Text="{x:Bind ViewModel.Name, Mode=OneWay}"
                             Style="{StaticResource CommonTextStyle}"
                             HorizontalAlignment="Left" VerticalAlignment="Top"
                             FontWeight="Medium" FontSize="15" MaxLines="2"
                             TextTrimming="WordEllipsis" TextWrapping="Wrap" />
                  <TextBlock Grid.Column="1" Name="TransTextBlock" Text="{x:Bind ViewModel.Trans, Mode=OneWay}"
                             Style="{StaticResource CommonTextStyle}"
                             Visibility="{x:Bind ViewModel.TransVisibility, Mode=OneWay}"
                             HorizontalAlignment="Left" VerticalAlignment="Top" Margin="4,0,0,0"
                             FontWeight="Bold" FontSize="12" MaxLines="1"
                             TextAlignment="Left" Opacity="0.8"
                             TextTrimming="WordEllipsis" TextWrapping="Wrap" />
              </Grid>
              <controls:MetadataControl x:Name="ArtistsMetadata"
                                        Separator=" / "
                                        HorizontalAlignment="Left" VerticalAlignment="Bottom"
                                        FontFamily="MiSans" FontSize="14" Padding="0"
                                        Items="{x:Bind ViewModel.ArtistsMetadata, Mode=OneWay}">
                  <controls:MetadataControl.TextBlockStyle>
                      <Style TargetType="TextBlock">
                          <Setter Property="TextTrimming" Value="CharacterEllipsis" />
                      </Style>
                  </controls:MetadataControl.TextBlockStyle>
              </controls:MetadataControl>
          </StackPanel>
          <HyperlinkButton Grid.Column="3"
                           x:Name="AlbumMetadata"
                           HorizontalAlignment="Center" VerticalAlignment="Center"
                           FontFamily="MiSans" FontSize="14" FontWeight="Normal"
                           MaxWidth="300" Foreground="Black" Padding="0"
                           Content="{x:Bind ViewModel.Album, Mode=OneWay}"
                           Command="{x:Bind ViewModel.ForwardAlbumCommand}" />
          <StackPanel Grid.Column="4" HorizontalAlignment="Right" VerticalAlignment="Center"
                      Orientation="Horizontal">
              <Button Margin="0,0,30,0" Height="30" Width="30" Padding="0" Background="Transparent"
                      BorderThickness="0" Command="{x:Bind LikeCommand}">
                  <FontIcon
                      Glyph="{x:Bind ViewModel.Liked, Converter={StaticResource LikeIconConverter}, Mode=OneWay}"
                      FontSize="16" />
              </Button>
              <TextBlock Name="TimeTextBlock" Text="{x:Bind ViewModel.Time, Mode=OneWay}"
                         Style="{StaticResource CommonTextStyle}"
                         Margin="0,3,0,0" Padding="0"
                         FontSize="14" />
          </StackPanel>

my repo: https://github.com/Miaoyww/NonsPlayer

Steps to reproduce the bug

Above

Expected behavior

No response

Screenshots

No response

NuGet package version

WinUI 3 - Windows App SDK 1.5.5: 1.5.240627000

Windows version

Windows Insider Build (xxxxx)

Additional context

Win11 23H2 22631.3380

[Miaoyww]

Styles here

    <Style x:Key="CommonTextStyle" TargetType="TextBlock">
        <Setter Property="FontSize" Value="18" />
        <Setter Property="FontFamily" Value="MiSans" />
        <Setter Property="TextTrimming" Value="CharacterEllipsis" />
        <Setter Property="TextWrapping" Value="WrapWholeWords" />
        <Setter Property="Foreground" Value="{StaticResource CommonTextColor}" />
        <Setter Property="FontWeight" Value="Normal" />
    </Style>

    <Style x:Key="CommonRichTextStyle" TargetType="RichTextBlock">
        <Setter Property="FontSize" Value="18" />
        <Setter Property="FontFamily" Value="MiSans" />
        <Setter Property="TextTrimming" Value="CharacterEllipsis" />
        <Setter Property="TextWrapping" Value="WrapWholeWords" />
        <Setter Property="Foreground" Value="{StaticResource CommonTextColor}" />
        <Setter Property="FontWeight" Value="Normal" />
    </Style>

[Miaoyww]

well, i changed my font to HarmonyOS Font, it displays well.
I thought it might because of MiSans

[ranjeshj]

@Miaoyww are you using a custom font 'MiSans'. I can't tell from the image. Could this be an issue with the custom font?

[Miaoyww]

@Miaoyww are you using a custom font 'MiSans'. I can't tell from the image. Could this be an issue with the custom font?

All of these fonts in my app are Misans
this font displays corret in the other platform e.g xiaomi-14,i suggests it probably is not the font's issue

[Miaoyww]

i changed my font to HarmonyOS Font, it displays okay.
But, MiSans did display right sometime, this confused me anyways.

[JohnnyWestlake]

MiSans isn't hinted properly ( https://en.wikipedia.org/wiki/Font_hinting ) which is quite common for mobile fonts as they display at much higher DPI's where the extra file space used by hinting isn't a necessary trade off. You won't notice on mobile because of the higher DPI, but on desktop at 96 DPI you will notice it very clearly, especially on smaller font sizes.

[Miaoyww]

Ahhhh i dont know this. So all of these caused by MiSans instead of winui3?

[ranjeshj]

@Miaoyww that does seem to be the case. Resolving as won't fix.