さわらブログ

さわら(@xhiroga)の技術ブログ

React Nativeのフォントは結局何が使えんねん一次調査

React Nativeでシステムにもともと入っているフォントを指定するにはどうしたらいいのか、試行錯誤したメモ。
めっちゃエラー喰らいました。
f:id:hiroga_cc:20180812155758p:plain

実験方法

以下の指定方法で、fontFamilyの値を入れ替えてみました。

<Text style={{ fontSize: 18, textAlign: 'center', fontFamily: 'System' }}>テスト</Text>

結論

普通に調べたら使えるフォント一覧が見つかりました...が、'San Francisco'だけはなぜか指定できませんでした。 github.com

それを踏まえて、うまくいく指定とダメな指定。

うまくいく指定

<Text style={{ fontSize: 18, textAlign: 'center', fontFamily: 'System' }}>システムフォント</Text>
// この指定方法でSan Franciscoが使えます。

<Text style={{ fontSize: 18, textAlign: 'center', fontFamily: 'Hiragino Mincho ProN' }}>ヒラギノ明朝</Text>
// 上記のフォント一覧は基本的にOK(San Francisco以外?は)

ダメな指定

<Text style={{ fontSize: 18, textAlign: 'center', fontFamily: 'San Francisco' }}>サンフランシスコ</Text>
// なぜかエラーになります。

<Text style={{ fontSize: 18, textAlign: 'center', fontFamily: 'HiraKakuProN-W3' }}>ヒラギノ角ゴ</Text>
// ヒラギノ角ゴはiOS SDK9以降から削除されている...っぽい?
// 追記: ヒラギノ角ゴの英字表記が'Hiragino Sans'になったことが原因のようです。