의 글꼴 Xamarin.Forms

Download Sample 샘플 다운로드

기본적으로 Xamarin.Forms 각 플랫폼에서 정의한 시스템 글꼴을 사용합니다. 그러나 텍스트를 표시하는 컨트롤은 이 글꼴을 변경하는 데 사용할 수 있는 속성을 정의합니다.

  • FontAttributes, 형식FontAttributes, 즉 세 개의 멤버NoneBoldItalic가 있는 열거형입니다. 이 속성의 기본값은 None입니다.
  • FontSize의 형식 double입니다.
  • FontFamily의 형식 string입니다.

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

글꼴 특성 설정

텍스트를 표시하는 컨트롤은 글꼴 특성을 지정하도록 속성을 설정할 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 직접 값 또는 열거형 값으로 NamedSize 설정할 double 수 있습니다.

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

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

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

Label label2 = new Label
{
    Text = "Large font size",
    FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label))
};

또는 메서드에 Device.GetNamedSize 두 번째 인수를 다음과 같이 지정하는 재정의가 있습니다 Element.

Label myLabel = new Label
{
    Text = "Large font size",
};
myLabel.FontSize = Device.GetNamedSize(NamedSize.Large, myLabel);

참고 항목

값으로 FontSize 지정된 경우 디바이스 독립적 단위로 double측정됩니다. 자세한 내용은 측정 단위를 참조 하세요.

명명된 글꼴 크기에 대한 자세한 내용은 명명된 글꼴 크기 이해(Understand)를 참조 하세요.

글꼴 패밀리 설정

텍스트를 표시하는 컨트롤은 속성을 글꼴 패밀리 이름(예: "Times Roman")으로 설정할 FontFamily 수 있습니다. 그러나 이 작업은 해당 글꼴 패밀리가 특정 플랫폼에서 지원되는 경우에만 작동합니다.

플랫폼에서 사용할 수 있는 글꼴을 파생하는 데 사용할 수 있는 여러 가지 기술이 있습니다. 그러나 TTF(True Type Format) 글꼴 파일의 존재가 반드시 글꼴 패밀리를 의미하지는 않으며 TTF는 애플리케이션에서 사용하기 위한 것이 아닌 경우가 많습니다. 또한 플랫폼 버전에서 플랫폼에 설치된 글꼴을 변경할 수 있습니다. 따라서 글꼴 패밀리를 지정하는 가장 신뢰할 수 있는 방법은 사용자 지정 글꼴을 사용하는 것입니다.

사용자 지정 글꼴을 공유 프로젝트에 추가하고 Xamarin.Forms 추가 작업 없이 플랫폼 프로젝트에서 사용할 수 있습니다. 이 작업을 수행하는 프로세스는 다음과 같습니다.

  1. 공유 프로젝트에 글꼴을 Xamarin.Forms 포함된 리소스로 추가합니다(빌드 작업: EmbeddedResource).
  2. 특성을 사용하여 AssemblyInfo.cs 같은 파일에서 어셈블리에 ExportFont 글꼴 파일을 등록합니다. 선택적 별칭을 지정할 수도 있습니다.

다음 예제에서는 별칭과 함께 어셈블리에 등록되는 랍스터-정규 글꼴을 보여 줍니다.

using Xamarin.Forms;

[assembly: ExportFont("Lobster-Regular.ttf", Alias = "Lobster")]

참고 항목

어셈블리에 글꼴을 등록할 때 폴더 이름을 지정하지 않고도 이 글꼴은 공유 프로젝트의 모든 폴더에 상주할 수 있습니다.

Windows에서는 글꼴 파일 이름과 글꼴 이름이 다를 수 있습니다. Windows에서 글꼴 이름을 검색하려면 .ttf 파일을 마우스 오른쪽 단추로 클릭하고 미리 보기를 선택합니다. 그런 다음 미리 보기 창에서 글꼴 이름을 확인할 수 있습니다.

그런 다음 파일 확장명 없이 이름을 참조하여 각 플랫폼에서 글꼴을 사용할 수 있습니다.

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

또는 별칭을 참조하여 각 플랫폼에서 사용할 수 있습니다.

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

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

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

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

다음 스크린샷은 사용자 지정 글꼴을 보여 줍니다.

Custom font on iOS and Android

Important

Windows에서 릴리스 빌드의 경우 사용자 지정 글꼴이 포함된 어셈블리가 메서드 호출에서 Forms.Init 인수로 전달되는지 확인합니다. 자세한 내용은 문제 해결을 참조하십시오.

플랫폼당 글꼴 속성 설정

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

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

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

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

label.FontSize = Device.RuntimePlatform == Device.iOS ? 20 :
    Device.RuntimePlatform == Device.Android ? Device.GetNamedSize(NamedSize.Medium, label) : 24;
label.FontFamily = Device.RuntimePlatform == Device.iOS ? "MarkerFelt-Thin" :
   Device.RuntimePlatform == Device.Android ? "Lobster-Regular" : "ArimaMadurai-Black";

플랫폼별 값을 제공하는 방법에 대한 자세한 내용은 플랫폼별 값 제공을 참조 하세요. 태그 확장에 OnPlatform 대한 자세한 내용은 OnPlatform 태그 확장을 참조 하세요.

명명된 글꼴 크기 이해

Xamarin.Forms 는 열거형에서 NamedSize 특정 글꼴 크기를 나타내는 필드를 정의합니다. 다음 표에서는 iOS, Android 및 UWP(유니버설 Windows 플랫폼)의 멤버 및 기본 크기를 보여 NamedSize 줍니다.

멤버 iOS Android UWP
Default 17 14 14
Micro 12 10 15.667
Small 14 14 18.667
Medium 17 17 22.667
Large 22 22 32
Body 17 16 14
Header 17 14 46
Title 28 24 24
Subtitle 22 16 20
Caption 12 12 12

크기 값은 디바이스 독립적 단위로 측정됩니다. 자세한 내용은 측정 단위를 참조 하세요.

참고 항목

iOS 및 Android에서 명명된 글꼴 크기는 운영 체제 접근성 옵션에 따라 자동 크기 조정됩니다. 이 동작은 플랫폼별 iOS에서 사용하지 않도록 설정할 수 있습니다. 자세한 내용은 iOS에서 명명된 글꼴 크기에 대한 접근성 크기 조정을 참조하세요.

글꼴 아이콘 표시

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

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

글꼴 데이터는 표시할 수 있는 모든 보기에서 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에서 이스케이프되어야 하므로 이스케이프됩니다 &#xf30c;. 해당하는 C# 코드는 다음과 같습니다.

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

다음 스크린샷은 바인딩 가능한 레이아웃 샘플에서 바인딩 가능한 레이아웃 으로 표시되는 몇 가지 글꼴 아이콘을 보여 줍니다.

Screenshot of font icons being displayed, on iOS and Android