Шрифты в Xamarin.Forms

Download Sample Скачайте пример

По умолчанию используется системный шрифт, Xamarin.Forms определенный каждой платформой. Однако элементы управления, отображающие текстовые свойства, которые можно использовать для изменения этого шрифта:

  • FontAttributes, тип FontAttributes, который является перечислением с тремя элементами: None, Boldи Italic. Значение по умолчанию этого свойства равно 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 может быть задано напрямую double или значением NamedSize перечисления:

<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значения, измеряется в единицах, независимых от устройства. Дополнительные сведения см. в разделе "Единицы измерения".

Дополнительные сведения о именованных размерах шрифтов см. в разделе "Общие сведения о размерах именованных шрифтов".

Настройка семейства шрифтов

Элементы управления, отображающие текст, могут задать FontFamily для свойства имя семейства шрифтов, например Times Roman. Однако это будет работать только в том случае, если семейство шрифтов поддерживается на конкретной платформе.

Существует ряд методов, которые можно использовать для получения шрифтов, доступных на платформе. Однако наличие файла шрифта TTF (True Type Format) не обязательно означает семейство шрифтов, и TTFs часто включаются, которые не предназначены для использования в приложениях. Кроме того, шрифты, установленные на платформе, могут изменяться с версией платформы. Поэтому наиболее надежным подходом для указания семейства шрифтов является использование настраиваемого шрифта.

Пользовательские шрифты можно добавить в Xamarin.Forms общий проект и использовать в проектах платформы без дополнительной работы. Чтобы этого добиться, выполните следующие действия.

  1. Добавьте шрифт в Xamarin.Forms общий проект в качестве внедренного ресурса (действие сборки: EmbeddedResource).
  2. Зарегистрируйте файл шрифта в сборке, например AssemblyInfo.cs, с помощью атрибута ExportFont . Также можно указать необязательный псевдоним.

В следующем примере показан шрифт Lobster-Regular, зарегистрированный в сборке, а также псевдоним:

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

Внимание

Для сборки выпуска в Windows убедитесь, что сборка, содержащая настраиваемый шрифт, передается в качестве аргумента в вызове Forms.Init метода. Дополнительные сведения см. в разделе Устранение неполадок.

Задание свойств шрифта для каждой платформы

On Классы OnPlatform и классы можно использовать в XAML для задания свойств шрифта для каждой платформы. В приведенном ниже примере задаются различные семейства шрифтов и размеры на каждой платформе:

<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 перечислении, представляющие определенные размеры шрифтов. В следующей таблице показаны NamedSize элементы и их размеры по умолчанию в iOS, Android и универсальная платформа Windows (UWP):

Элемент 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.

Отображение значков шрифтов

Значки шрифтов могут отображаться приложениями Xamarin.Forms , указывая данные значка шрифта в объекте FontImageSource . Этот класс, производный ImageSource от класса, имеет следующие свойства:

  • Glyph — значение символа юникода значка шрифта, указанное в виде символа string.
  • Sizedouble— значение, указывающее размер( в независимых от устройства единицах) отрисованного значка шрифта. Значение по умолчанию — 30. Кроме того, это свойство можно задать для именованного размера шрифта.
  • FontFamily — представляет string семейство шрифтов, к которому принадлежит значок шрифта.
  • Color — необязательное Color значение, используемое при отображении значка шрифта.

Данные шрифта могут отображаться в любом представлении, которое может отображаться ImageSource. Этот подход позволяет отображать значки шрифта, такие как эмодзи, в нескольких представлениях, а не ограничение отображения значков шрифта на одно текстовое представление, например Label.

Внимание

Значки шрифтов можно указать только в настоящее время в представлении символов юникода.

В следующем примере XAML есть один значок шрифта, отображаемый представлением Image :

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

Этот код отображает значок XBox из семейства шрифтов Ionicons в представлении Image . Обратите внимание, что в то время как символ юникода для этого значка \uf30cдолжен быть экранирован в XAML и поэтому становится &#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