フォント Xamarin.Forms

[アーティクル]
01/30/2024

既定では、 Xamarin.Forms 各プラットフォームで定義されたシステムフォントを使用します。ただし、テキストを表示するコントロールは、このフォントの変更に使用できるプロパティを定義します。

FontAttributes、、および Italic. の 3 つのメンバーBoldNoneを持つ列挙体である型FontAttributesです。このプロパティの既定値は None です。
double 型の FontSize。
string 型の FontFamily。

これらのプロパティは、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 、2 番目の引数を次のように指定するオーバーライドがあります Element。

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

Note

値を FontSize 指定すると、デバイスに依存しない単位で測定されます double。詳細については、「測定単位」を参照してください。

名前付きフォントサイズの詳細については、「名前付きフォントサイズについて」を参照してください。

フォントファミリを設定する

テキストを表示するコントロールは、プロパティを FontFamily フォントファミリ名 ("Times Roman" など) に設定できます。ただし、これは、そのフォントファミリが特定のプラットフォームでサポートされている場合にのみ機能します。

プラットフォームで使用できるフォントの派生を試みるために使用できるさまざまな手法があります。ただし、TTF (True Type Format) フォントファイルが存在することは、必ずしもフォントファミリを意味するとは限りません。また、多くの場合、TTF はアプリケーションで使用することを意図していないものに含まれます。さらに、プラットフォームにインストールされているフォントは、プラットフォームのバージョンによって変更される可能性があります。したがって、フォントファミリを指定するための最も信頼性の高い方法は、カスタムフォントを使用することです。

カスタムフォントを共有プロジェクトに Xamarin.Forms 追加し、追加作業なしでプラットフォームプロジェクトで使用できます。その手順は次のとおりです。

埋め込みリソースとして共有プロジェクトに Xamarin.Forms フォントを追加します (ビルドアクション: EmbeddedResource)。
属性を使用して、 AssemblyInfo.cs などのファイルにフォントファイルをアセンブリに ExportFont 登録します。省略可能なエイリアスを指定することもできます。

次の例は、アセンブリに登録されているLobster-Regularフォントとエイリアスを示しています。

using Xamarin.Forms;

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

Note

フォントは、アセンブリにフォントを登録するときにフォルダー名を指定しなくても、共有プロジェクト内の任意のフォルダーに配置できます。

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"
};

次のスクリーンショットは、カスタムフォントを示しています。

重要

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 表す列挙体のフィールドを定義します。次の表に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

サイズの値は、デバイスに依存しない単位で測定されます。詳細については、「測定単位」を参照してください。

Note

iOS と Android では、名前付きフォントサイズはオペレーティングシステムのアクセシビリティオプションに基づいて自動スケーリングされます。この動作は、プラットフォーム固有の iOS で無効にすることができます。詳細については、「 iOS での名前付きフォントサイズのアクセシビリティスケーリング」を参照してください。

フォントアイコンの表示

フォントアイコンは、オブジェクト内のフォントアイコンデータを指定することで、アプリケーションによってXamarin.FormsFontImageSource表示できます。クラスから ImageSource 派生するこのクラスには、次のプロパティがあります。

Glyph – フォントアイコン stringの Unicode 文字値。
Sizedouble– レンダリングされたフォントアイコンのサイズをデバイスに依存しない単位で示す値。既定値は 30 です。さらに、このプロパティは、名前付きフォントサイズに設定できます。
FontFamilystring– フォントアイコンが属するフォントファミリを表します。
Color – フォントアイコンを表示するときに使用する省略可能 Color な値。

フォントデータは、表示できる任意のビューで表示 ImageSourceできます。この方法では、フォントアイコンの表示を 1 つのテキスト表示ビューに制限するのではなく、絵文字などのフォントアイコンを複数のビュー Labelで表示できます。

重要

フォントアイコンは、現在、Unicode 文字表現でのみ指定できます。

次の XAML の例では、1 つのフォントアイコンがビューに Image 表示されます。

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

このコードは、Ionicons フォントファミリの XBox アイコンを Image ビューに表示します。このアイコンの Unicode 文字は \uf30c、XAML でエスケープする必要があるために注意してください。これに相当する 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
};

バインド可能なレイアウトのサンプルの次のスクリーンショットは、バインド可能なレイアウトによって表示されているいくつかのフォントアイコンを示しています。

iOS および Android のフォントアイコンがスクリーンショット

フォント Xamarin.Forms

フォント属性を設定する

フォント サイズを設定する

フォント ファミリを設定する

プラットフォームごとにフォント プロパティを設定する

名前付きフォント サイズを理解する

フォント アイコンの表示

関連リンク

その他のリソース

フォントサイズを設定する

フォントファミリを設定する

プラットフォームごとにフォントプロパティを設定する

名前付きフォントサイズを理解する

フォントアイコンの表示