中的字型 Xamarin.Forms

Download Sample 下載範例

根據預設, Xamarin.Forms 會使用每個平臺所定義的系統字型。 不過,顯示文字的控制項會定義可用來變更此字型的屬性:

  • FontAttributesFontAttributes別為 的 ,這是具有三個成員的列舉: NoneBoldItalic。 此屬性的預設值為 None
  • FontSizedouble別為 的 。
  • FontFamilystring別為 的 。

這些屬性是由 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);

注意

當指定為 double時,值FontSize是以裝置無關的單位來測量。 如需詳細資訊,請參閱 度量單位。

如需具名字號的詳細資訊,請參閱 瞭解具名字號

設定字型系列

顯示文字的 FontFamily 控件可以將 屬性設定為字型系列名稱,例如 「Times Roman」。。 不過,只有在特定平台上支援該字型系列時,才能運作。

有許多技術可用來嘗試衍生平臺上可用的字型。 不過,TTF (True Type Format) 字型檔案的存在並不一定表示字型系列,而且 TTF 通常包含在應用程式中不適合使用的 TTF。 此外,安裝在平臺上的字型可以隨著平臺版本而變更。 因此,指定字型系列的最可靠方法是使用自定義字型。

自定義字型可以新增至您的 Xamarin.Forms 共享專案,並由平台專案取用,而不需要任何額外的工作。 完成此作業的程式如下所示:

  1. 將字型新增至 Xamarin.Forms 您的共享專案作為內嵌資源(建置動作:EmbeddedResource)。
  2. 使用 ExportFont 屬性,在 AssemblyInfo.cs 之類的檔案中,向元件註冊字型檔案。 您也可以指定選擇性別名。

下列範例顯示要向元件註冊的 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 元件會在方法呼叫中當做自變數傳遞。 如需詳細資訊,請參閱疑難排解

設定每個平臺的字型屬性

OnPlatformOn 類別可用於 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):

member 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 – 字型圖示的 unicode 字元值,指定為 string
  • Size – 值 double ,指出所轉譯字型圖示的大小,以裝置獨立單位為單位。 預設值是 30。 此外,這個屬性也可以設定為具名字號。
  • FontFamilystring– ,表示字型圖示所屬的字型系列。
  • Color – 顯示字型圖示時要使用的選擇性 Color 值。

任何可顯示的檢視都可以顯示 ImageSource字型數據。 這種方法允許多個檢視顯示字型圖示,例如 emoji,而不是將字型圖示顯示限制為單一文字呈現檢視,例如 Label

重要

字型圖示目前只能由其 Unicode 字元表示來指定。

下列 XAML 範例具有檢視所顯示的 Image 單一字型圖示:

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

此程式代碼會在檢視中 Image 顯示來自 Ionicons 字型系列的 XBox 圖示。 請注意,雖然此圖示的 Unicode 字元是 \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