在 Avalonia 程式中新增自定義字型，並最佳化字型顯示效果

不是豆豆發表於2024-10-22
自定義字型

這裡以 MiSans 為例，因為嘗試了下 阿里巴巴普惠體 失敗了。。。其它字型還未嘗試

1、新增字型需要將所需字型檔案新增到專案中，並將其“生成操作”設定為“AvaloniaResource”，如圖：

在 Avalonia 程式中新增自定義字型，並最佳化字型顯示效果

2、在 App.axaml 中新增字型引用

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="AvaloniaApplication1.App"
             RequestedThemeVariant="Default">
             <!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options. -->

    <Application.Styles>
        <FluentTheme />
    </Application.Styles>
    <Application.Resources>
        <!-- 指定字型檔案（#號後是字型名稱，必須指定，否則不生效。貌似不支援字型的變體，如：MiSans Bold） -->
        <FontFamily x:Key="MiSans">avares://AvaloniaApplication1/fonts/MiSans-Normal.ttf#MiSans</FontFamily>
        <!-- 指定字型資料夾（#號後是字型名稱，必須指定，否則不生效。） -->
        <!--<FontFamily x:Key="MiSans">avares://AvaloniaApplication1/fonts#MiSans</FontFamily>-->
    </Application.Resources>
</Application>

3、最後，在需要使用字型的地方，進行使用，此處以將視窗字型設定為 MiSans 為例：

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="660"
        x:Class="AvaloniaApplication1.MainWindow"
        FontFamily="{StaticResource MiSans}">

    <!--...... 其它程式碼......-->
    
</Windows>

4、還可以透過程式碼進行全域性設定，修改 Program.cs 內程式碼：

using Avalonia;
using Avalonia.Media;
using System;

namespace AvaloniaApplication1
{
    internal class Program
    {
        // Initialization code. Don't use any Avalonia, third-party APIs or any
        // SynchronizationContext-reliant code before AppMain is called: things aren't initialized
        // yet and stuff might break.
        [STAThread]
        public static void Main(string[] args) => BuildAvaloniaApp()
            .StartWithClassicDesktopLifetime(args);

        // Avalonia configuration, don't remove; also used by visual designer.
        public static AppBuilder BuildAvaloniaApp()
            => AppBuilder.Configure<App>()
                .UsePlatformDetect()
                // 此處是新增了一個內建預設字型
                .WithInterFont()
                // 此處配置自定義字型
                .With(new FontManagerOptions
                {
                    // 設定為預設字型
                    DefaultFamilyName = "avares://AvaloniaApplication1/fonts/MiSans-Normal.ttf#MiSans",
                    FontFallbacks = new[]
                    {
                        // 且必須再設定一個回落字型，否則會被前面新增的內建預設字型覆蓋
                        // 或者也可以不新增內建預設字型，此處即可不再設定
                        new FontFallback
                        {
                            FontFamily = new FontFamily("avares://AvaloniaApplication1/fonts/MiSans-Normal.ttf#MiSans")
                        }
                    }
                })
                .LogToTrace();
    }
}

5、配置完預設字型後，發現字型邊緣鋸齒非常明顯，影響觀感。

可以進行字型渲染的配置，但目前只找到在單個視窗或控制元件上進行配置的方法，不知道全域性如何配置。

using Avalonia.Controls;
using Avalonia.Media;
using Avalonia.Media.Imaging;

namespace AvaloniaApplication1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            // 字型渲染模式：Alias - 鋸齒、Antialias - 抗鋸齒、SubpixelAntialias - 次畫素抗鋸齒
            RenderOptions.SetTextRenderingMode(this, TextRenderingMode.SubpixelAntialias);

            // 如果發現圖片呈現不清晰，應該可以透過該配置最佳化渲染：點陣圖插值模式
            RenderOptions.SetBitmapInterpolationMode(this, BitmapInterpolationMode.HighQuality);

            // 如果發現形狀邊緣有鋸齒，應該可以透過該配置最佳化渲染：邊緣渲染模式
            RenderOptions.SetEdgeMode(this, EdgeMode.Antialias);
        }
    }
}

結束。

參考連結：

https://github.com/AvaloniaUI/Avalonia/pull/9584

https://github.com/AvaloniaUI/Avalonia/pull/15676

相關文章