ionic v3でiosのSanfrancisco fontが適用されない問題をfix

5174 ワード
font scss Ionic3 CSS ionic CSS テキストリンク

はじめに

Sanfrancisco Fontはios9から新しく追加されたfontであり-apply-systemで読み込む事ができる
　参照：CSSでSan Franciscoを指定する(2017年版)

Sanfrancisco Fontが-apple-sysytem fontで読み込まれるというのでほったらかしにしていたが数字の表記をしっかり確認したとことどうやら読み込まれてないことに気づいた

最初はionic v3によるfont-familyの指定の仕方かと思ったので以下のように変更してみた

もともと

$font-family-base: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
"Helvetica Neue", Roboto, sans-serif;

で指定していたがv3からは↓のように指定しないと適用されないらしい

$font-family-md-base: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
"Helvetica Neue", Roboto, sans-serif;
$font-family-ios-base:  -apple-system, BlinkMacSystemFont, "Hiragino Sans",
"Helvetica Neue", Roboto, sans-serif;
$font-family-wp-base: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
"Helvetica Neue", Roboto, sans-serif;

参照:ionic v3のfontの指定

だが上記で読み込み方を変えても全く意味がなかった
適用されない

なのでSanfrancisco Fontをプロジェクトに保存してscssで読み込むしかないという結論に至った

/** Regular */
@font-face {
  font-family: "sf display";
  font-weight: 400;
  src: url("../assets/fonts/sfdisplay/sf-display-regular.woff") format("woff");
}

/** Medium */
@font-face {
  font-family: "sf display";
  font-weight: 500;
  src: url("../assets/fonts/sfdisplay/sf-display-medium.woff") format("woff");
}

/** Semibold */
@font-face {
  font-family: "sf display";
  font-weight: 600;
  src: url("../assets/fonts/sfdisplay/sf-display-semibold.woff") format("woff");
}

fontsディレクトリ下にwoff形式のSanfrancisco Fontを配置した
今回は数字の表記だけデザインと同等に表示するためにサブセット化し、軽量化のためにwoffに変換をした

Sanfrancisco Fontはこちらからダウンロード