埋め込みフォントをどう扱うべきか?

#wpdev_jp #win8dev_jp

ほかでいい記事が上がっていたので、いい機会なのでまとめてみました。

個人的には埋め込みフォントを扱う時の原則はこれ。

  • コンテンツではなくリソースとして組み込む。
    →これは、アプリが大きくなって起動が遅くなるというデメリットもあるんですが...
  • 開発者はフォントの名前を調べたりはしない
  • アプリ内でコントロールに個別にフォントファイル名指定をしない(リソース化)
  • アプリ全体でフォントは管理する
  • フォントを設定するのに、コードで書かない&XAMLも手入力しない

今回はサンプルにふい字を使わせていただきました。

フォントをプロジェクトに追加する

まぁ、Windows 8 だったら Assets フォルダに入れましょう。その際に僕は通常リソースに変更します。

image

フォント名の設定をいただく

まずはTextBlock などを配置して、テキストのFontFamily プロパティから組み込んだフォントを指定します。

image

リソース化

アプリ内でここだけで使うならこれだけでもいいですが、そのためなら画像にして埋め込んだほうがいいです。

フォント管理をするためにはリソース化することをお勧めします。フォントファイル自体が変更されても、リソース1か所の変更で対応できるからです。また、通常は埋め込んだフォントはアプリ全体で使いますので、アプリ全体でリソース化します。FontFamily のオプションから「新しいリソースに変換」を選びます。

image

そして、定義先はこのドキュメントではなく、アプリケーションにします。これでほかの画面でも使用することができます。

image

App.xaml のリソースにこのFont設定が追加されます。

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>

    :
        <FontFamily x:Key="HuijiFont">Assets/HuiFontP29.ttf#HuiFontP</FontFamily>

    </ResourceDictionary>
< /Application.Resources>

フォント設定もリソースを参照するようになっています。

<TextBlock Text="TextBlock" FontFamily="{StaticResource HuijiFont}" />

個別にフォント設定をする場合

コントロール個別でフォントを指定する場合は、FontFamily のオプションの、ローカルリソースから作成したフォントリソースを適応します。

image

画面のほとんどを埋め込んだフォントで表記する場合

普通はUIの統一を考えたら、画面全体で統一したフォントを使うべき。その際に個々のコントロールに指定するのはめんどうです。コードビハインドから同的にコントロールを追加する際も面倒ですし。

で、こういう時は、画面全体の Page クラスにFontFamily プロパティを設定します。こうすると、画面内のコントロールでFontFamily の指定がないものはすべてPageクラスに指定したフォントになります。

image

日本語のフォントのサイズとライセンスの問題

日本語のフォントを組み込む際に問題になるのがライセンス、そしてフォント自体のサイズです。これを両方解決してるのが M+フォントです。なんと言ってもこのフォントはそれぞれのフォントが1.5MB程度の抑えられているのでうれしいです。さらに、Segoe UI にもFontFace が似ているというメリットもあったりしてw

使う際は説明書をしっかり読んで使ってくださいね。