iOS7で使われる極細のHelvetica書体をcssで指定したい時

iOS7のシステム他で採用された極細の欧文書体。
この書体はHelveticaと呼ばれるフォントファミリーのひとつであり、表示出来るモバイル端末はフォントがインストールされているiPhoneやiPadに限定され、残念ながらAndroidでは表示出来ない。

iOS限定といった制限はあるが、あの美しい書体を自身サイトに取り入れたいという場合もあるだろう。

書体の名称は、HelveticaNeue-UltraLight
実際にスタイルシートで指定する場合は以下のようにする。

CSS

.ultra-light {
font-family: ‘HelveticaNeue-UltraLight’;
}

これだけではAndroid端末向けの指定がないから、Androidで使われているRobotoやDroid Sans、そしてsans-serifをお約束で記載しておくといい。

CSS

.ultra-light {
font-family: ‘HelveticaNeue-UltraLight’, Roboto, 'Droid Sans', sans-serif;
}

ちなみに、Robotoはモトヤの日本語書体を含み、Droid Sansも日本語書体(Droid Sans Japanese)を含むが、HelveticaNeue-UltraLightは日本語書体を含まないため、日本語が入っている部分に指定すると気持ち悪い結果となるので注意。

 

デジタルゲートがお手伝い

ホームページをリニューアルしたい、スマホ対応にしたい、デザインそのままで機能だけ追加したい、更新だけ代行して欲しい。サイトを運営したいけど誰に相談したらいいか分からない。そんな時はお気軽にお問い合わせください。

スポンサーリンク