.NET MAUI의 글꼴

아티클
05/14/2024

기본적으로 .NET 다중 플랫폼 앱 UI(.NET MAUI) 앱은 각 플랫폼에서 Open Sans 글꼴을 사용합니다. 그러나 이 기본값을 변경할 수 있으며 앱에서 사용하기 위해 추가 글꼴을 등록할 수 있습니다.

텍스트를 표시하는 모든 컨트롤은 글꼴 모양을 변경하도록 설정할 수 있는 속성을 정의합니다.

FontFamily의 형식 string입니다.
FontAttributes, 형식FontAttributes, 즉 세 개의 멤버NoneBoldItalic가 있는 열거형입니다. 이 속성의 기본값은 None입니다.
FontSize의 형식 double입니다.
FontAutoScalingEnabled앱의 UI가 운영 체제에 설정된 텍스트 크기 조정 기본 설정을 반영하는지 여부를 정의하는 형식 bool의 입니다. 이 속성의 기본값은 true입니다.

이러한 속성은 BindableProperty 개체에서 지원하며, 따라서 데이터 바인딩의 대상이 될 수 있고 스타일이 지정될 수 있습니다.

텍스트를 표시하는 모든 컨트롤은 글꼴 크기 조정을 자동으로 사용합니다. 즉, 앱의 UI는 운영 체제에 설정된 텍스트 크기 조정 기본 설정을 반영합니다.

글꼴 등록

TTF(True 형식) 및 OTF(열린 형식 글꼴) 글꼴을 앱에 추가하고 파일 이름 또는 별칭으로 참조할 수 있으며, 클래스의 메서드에서 MauiProgram 등록이 CreateMauiApp 수행됩니다. 이 작업은 개체에서 MauiAppBuilder 메서드를 ConfigureFonts 호출하여 수행됩니다. 그런 다음 개체에서 IFontCollection 메서드를 AddFont 호출하여 앱에 필요한 글꼴을 추가합니다.

namespace MyMauiApp
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("Lobster-Regular.ttf", "Lobster");
                });

            return builder.Build();
        }
    }  
}

위의 예제에서 메서드의 첫 번째 인수 AddFont 는 글꼴 파일 이름이고 두 번째 인수는 글꼴을 사용할 때 참조할 수 있는 선택적 별칭을 나타냅니다.

글꼴을 프로젝트의 Resources\Fonts 폴더로 끌어 앱 프로젝트에 추가할 수 있습니다. 여기서 해당 빌드 작업은 자동으로 MauiFont로 설정됩니다. 그러면 프로젝트 파일에 해당 항목이 만들어집니다. 또는 프로젝트 파일에서 wild카드 사용하여 앱의 모든 글꼴을 등록할 수 있습니다.

<ItemGroup>
   <MauiFont Include="Resources\Fonts\*" />
</ItemGroup>

앱 프로젝트의 다른 폴더에 글꼴을 추가할 수도 있습니다. 그러나 이 시나리오에서는 속성 창에서 빌드 작업을 MauiFont 로 수동으로 설정해야 합니다.

빌드 시 글꼴이 앱 패키지에 복사됩니다. 글꼴 패키징을 사용하지 않도록 설정하는 방법에 대한 자세한 내용은 글꼴 패키징 사용 안 함을 참조 하세요.

참고 항목

wild카드 문자는 * 폴더 내의 모든 파일이 글꼴 파일로 처리됨을 나타냅니다. 또한 하위 폴더의 파일도 포함하려는 경우 추가 wild카드 문자를 사용하여 구성합니다. 예를 들면 Resources\Fonts\**\*다음과 같습니다.

글꼴 사용

파일 확장명 없이 텍스트를 글꼴 이름으로 표시하는 컨트롤의 속성을 설정 FontFamily 하여 등록된 글꼴을 사용할 수 있습니다.

<!-- Use font name -->
<Label Text="Hello .NET MAUI"
       FontFamily="Lobster-Regular" />

또는 별칭을 참조하여 사용할 수 있습니다.

<!-- Use font alias -->
<Label Text="Hello .NET MAUI"
       FontFamily="Lobster" />

해당하는 C# 코드는 다음과 같습니다.

// Use font name
Label label1 = new Label
{
    Text = "Hello .NET MAUI!",
    FontFamily = "Lobster-Regular"
};

// Use font alias
Label label2 = new Label
{
    Text = "Hello .NET MAUI!",
    FontFamily = "Lobster"
};

Android에서는 다음 시스템 글꼴을 속성 값 FontFamily 으로 설정하여 사용할 수 있습니다.

고정폭
리프
sans-serif(또는 sansserif)
sans-serif-black(또는 sansserif-black)
sans-serif-condensed(또는 sansserif-condensed)
sans-serif-condensed-light(또는 sansserif-condensed-light)
sans-serif-light(또는 sansserif-light)
sans-serif-medium(또는 sansserif-medium)

예를 들어 모노스페이스 시스템 글꼴은 다음 XAML과 함께 사용할 수 있습니다.

<Label Text="Hello .NET MAUI"
       FontFamily="monospace" />

해당하는 C# 코드는 다음과 같습니다.

// Use font name
Label label1 = new Label
{
    Text = "Hello .NET MAUI!",
    FontFamily = "monospace"
};

글꼴 특성 설정

텍스트를 표시하는 컨트롤은 글꼴 특성을 지정하도록 속성을 설정할 FontAttributes 수 있습니다.

<Label Text="Italics"
       FontAttributes="Italic" />
<Label Text="Bold and italics"
       FontAttributes="Bold, Italic" />

해당하는 C# 코드는 다음과 같습니다.

Label label1 = new Label
{
    Text = "Italics",
    FontAttributes = FontAttributes.Italic
};

Label label2 = new Label
{
    Text = "Bold and italics",
    FontAttributes = FontAttributes.Bold | FontAttributes.Italic
};

글꼴 크기 설정

텍스트를 표시하는 컨트롤은 글꼴 크기를 지정하도록 속성을 설정할 FontSize 수 있습니다. 속성을 FontSize 값으로 설정할 수 있습니다.double

<Label Text="Font size 24"
       FontSize="24" />

해당하는 C# 코드는 다음과 같습니다.

Label label = new Label
{
    Text = "Font size 24",
    FontSize = 24
};

참고 항목

값은 FontSize 디바이스 독립적 단위로 측정됩니다.

글꼴 자동 크기 조정 사용 안 함

텍스트를 표시하는 모든 컨트롤에는 기본적으로 글꼴 크기 조정이 사용하도록 설정되어 있습니다. 즉, 앱의 UI는 운영 체제에 설정된 텍스트 크기 조정 기본 설정을 반영합니다. 그러나 텍스트 기반 컨트롤의 false속성을 다음으로 설정하여 이 동작을 사용하지 않도록 설정할 FontAutoScalingEnabled 수 있습니다.

<Label Text="Scaling disabled"
       FontSize="18"
       FontAutoScalingEnabled="False" />

이 방법은 텍스트가 특정 크기로 표시되도록 보장하려는 경우에 유용합니다.

참고 항목

글꼴 자동 크기 조정은 글꼴 아이콘에서도 작동합니다. 자세한 내용은 글꼴 아이콘 표시를 참조 하세요.

플랫폼당 글꼴 속성 설정

OnPlatform XAML에서 클래스 및 On 클래스를 사용하여 플랫폼당 글꼴 속성을 설정할 수 있습니다. 아래 예제에서는 다양한 글꼴 패밀리와 크기를 설정합니다.

<Label Text="Different font properties on different platforms"
       FontSize="{OnPlatform iOS=20, Android=22, WinUI=24}">
    <Label.FontFamily>
        <OnPlatform x:TypeArguments="x:String">
            <On Platform="iOS" Value="MarkerFelt-Thin" />
            <On Platform="Android" Value="Lobster-Regular" />
            <On Platform="WinUI" Value="ArimaMadurai-Black" />
        </OnPlatform>
    </Label.FontFamily>
</Label>

이 속성은 DeviceInfo.Platform 코드에서 플랫폼당 글꼴 속성을 설정하는 데 사용할 수 있습니다.

Label label = new Label
{
    Text = "Different font properties on different platforms"
};

label.FontSize = DeviceInfo.Platform == DevicePlatform.iOS ? 20 :
    DeviceInfo.Platform == DevicePlatform.Android ? 22 : 24;  
label.FontFamily = DeviceInfo.Platform == DevicePlatform.iOS ? "MarkerFelt-Thin" :
    DeviceInfo.Platform == DevicePlatform.Android ? "Lobster-Regular" : "ArimaMadurai-Black";

플랫폼별 값을 제공하는 방법에 대한 자세한 내용은 디바이스 정보를 참조하세요. 태그 확장에 OnPlatform 대한 자세한 내용은 플랫폼에 따라 UI 모양 사용자 지정을 참조하세요.

글꼴 아이콘 표시

개체의 글꼴 아이콘 데이터를 지정하여 .NET MAUI 앱에서 글꼴 아이콘을 FontImageSource 표시할 수 있습니다. 클래스에서 ImageSource 파생되는 이 클래스에는 다음과 같은 속성이 있습니다.

Glyph – 글꼴 아이콘의 유니코드 문자 값으로 string지정됩니다.
Sizedouble– 렌더링된 글꼴 아이콘의 크기(디바이스 독립적 단위)를 나타내는 값입니다. 기본값은 30입니다. 또한 이 속성은 명명된 글꼴 크기로 설정할 수 있습니다.
FontFamilystring– 글꼴 아이콘이 속한 글꼴 패밀리를 나타내는 값입니다.
Color – 글꼴 아이콘을 표시할 때 사용할 선택적 Color 값입니다.

이 데이터는 PNG를 만드는 데 사용되며, 이 PNG는 표시할 수 있는 모든 보기에서 ImageSource표시할 수 있습니다. 이 방법을 사용하면 글꼴 아이콘 표시를 단일 텍스트 프레젠테이션 보기(예: )로 Label제한하는 것이 아니라 이모지와 같은 글꼴 아이콘을 여러 보기로 표시할 수 있습니다.

Important

글꼴 아이콘은 현재 유니코드 문자 표현으로만 지정할 수 있습니다.

다음 XAML 예제에는 보기에 표시되는 단일 글꼴 아이콘이 Image 있습니다.

<Image BackgroundColor="#D1D1D1">
    <Image.Source>
        <FontImageSource Glyph="&#xf30c;"
                         FontFamily="{OnPlatform iOS=Ionicons, Android=ionicons.ttf#}"
                         Size="44" />
    </Image.Source>
</Image>

이 코드는 Ionicons 글꼴 패밀리의 XBox 아이콘을 보기에 Image 표시합니다. 이 아이콘의 유니코드 문자는 \uf30cXAML에서 이스케이프되어야 하므로 이스케이프됩니다 . 해당하는 C# 코드는 다음과 같습니다.

Image image = new Image { BackgroundColor = Color.FromArgb("#D1D1D1") };
image.Source = new FontImageSource
{
    Glyph = "\uf30c",
    FontFamily = DeviceInfo.Platform == DevicePlatform.iOS ? "Ionicons" : "ionicons.ttf#",
    Size = 44
};

다음 스크린샷은 표시되는 여러 글꼴 아이콘을 보여 줍니다.

Screenshot of three font icons.

또는 태그 확장이 있는 글꼴 아이콘을 표시할 FontImage 수 있습니다. 자세한 내용은 글꼴 로드 아이콘을 참조하세요.

Share via

.NET MAUI의 글꼴

글꼴 등록

글꼴 사용

글꼴 특성 설정

글꼴 크기 설정

글꼴 자동 크기 조정 사용 안 함

플랫폼당 글꼴 속성 설정

글꼴 아이콘 표시

피드백

추가 리소스