iPhone内蔵フォントをfont-familyで指定する

CSSのfont-familyで指定するとき、軽くつまずくのがフォント名の綴り…
よく使う、ヒラギノ角ゴ やメイリオは、前に設定した時のをコピーしてくればいいですが
iPhoneやiPadの内蔵フォントを使うとなると、使えるフォントとfont-familyで指定する綴りをどうやって調べたらよいのか。

アプリ「Typefaces」でfont-family用の綴りを確認

起動するとすぐフォントの一覧が表示されますTypefacesという、iPhone iPadに内蔵されているフォントを確認できるアプリで、font-familyを設定するまでの流れを紹介します。

まずは、App Store で Typefaces をダウンロードします。無料です。

シンプルなアプリなので、起動するとすぐフォントの一覧が表示されます。
ひととおり眺めたあと(笑)指定したいフォントを選びます。

フォントを選択すると詳細が表示されます「Font Info」画面にある「PostScript名」
右下のメニューで「Font Info」を選ぶと、画面が切り替わり
フォント名の情報を見られるようになります。ここにのっている「ファミリー」
これが、font-family で指定する綴り。

この例なら「Noteworthy」です。

font-familyを指定

メモアプリ風に、こんなかんじで設定してみます。

.note {
	font-family: "Noteworthy", sans-serif;
	background: #f9f7c0;
}

↓iPhoneで見た時変わってますか~?

.note {
	font-family: "Noteworthy", sans-serif;
	color: #000;
	background: #f9f7c0;
}

関連記事

Pocket