font-family指定の覚書

css/コーディング

完全なる自分のための覚書です。

フォント指定って、悩ましいですよね。

どのデバイスでの指定したフォントで出て欲しい。。。

※注意※字詰めができないフォント

Noto Serif JP、ヒラギノ明朝 ProNは字詰めができません。(多分Noto Sans JPも)
字詰めができないとデザインによっては弊害が出るので、使い所を選ぶ必要がありそうです。

明朝体を指定(androidでは要ウェブフォント)

$FONT-BASE: 'ヒラギノ明朝 ProN' , 'Hiragino Mincho ProN' , '游明朝','游明朝体',YuMincho,'Yu Mincho' , 'MS 明朝' , 'MS Mincho' , HiraMinProN-W3 , 'TakaoEx明朝' , TakaoExMincho , 'MotoyaLCedar' , 'Droid Sans Japanese' , serif;

IEでもChrome、ios、safariでも明朝体で表示されます。

しかしアンドロイドスマホは明朝体が無いので、アンドロイドまで対応したければウェブフォント必須。

@import でsassファルにインクルードしてくれば、head内にタグを書かなくても大丈夫。

(@importが近いうちに廃止されるようなので、その点はお気をつけください)

@import url("https://fonts.googleapis.com/css?family=Noto+Serif+JP:200,300,400,500,600,700,900");
上記ならIEも明朝体で表示されますが、IEってgoogle font非対応だったんですね・・・知らなかった・・・

游ゴシック体を指定

$ff-default:"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;

他にもあったら追記しまーす。

タイトルとURLをコピーしました