【初心者でもわかる】font-familyの正しいつけ方・ツールも紹介(2020年 秋版)
どうも7noteです。デザインを通ってないと種類が多くて指定が厄介なフォントのお話。
いざホームぺージをコーディングするときにデザインデータを見ると、様々なフォントがいろんなところに使用されています。
ただ一般の人がWEBサイトを見る時にみれるフォントは限られているので、font-familyを正しく指定しなければ思っている通りのデザインにはなりません。
特にwindows、mac、iphoneではそれぞれみれるフォントが違うので、しっかりとデザインで使われているフォントと見比べる必要があります。
各デバイスで使用できる主要フォント一覧
デバイス | フォント |
---|---|
windows | メイリオ、游ゴシック、游明朝体、MS ゴシック、MS 明朝、Arial |
mac | ヒラギノ角ゴシック、ヒラギノ明朝 ProN、Osaka、游ゴシック、游明朝体、Arial |
android | (機種によって異なる) |
iphone | ヒラギノ角ゴシック、ヒラギノ明朝 ProN、Arial |
Arialだけは欧文フォントですが、それ以外は日本語フォントです。
こうして比べると各デバイス共通で使える日本語フォントはないのです。
なので、基本フォントを指定する時は以下のような指定方法を行います。
font-family 指定例
font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
※sans-serifはそのデバイスで使用できるゴシック体
主要フォント以外がデザインで使用されている場合の対応方法
いざデザインデータの中をみた時、「あれ、このフォントデフォルトで入ってないやつだ・・・」ってなったらどうしましょうか?
1.画像にしてしまう。
あまりないフォントだったり、大きな見出しだったり、グラフで使われていたりする箇所ならいっそ画像にしてしまう方が良いでしょう。
2.基本フォントで作成する。
デザイナーに確認して、重要度が高くないところなどは周りに合わせてデバイスのデフォルトのフォントでいくのも1つの方法でしょう。
3.WEBフォントを読み込む。
WEBフォントを読み込むことで、デバイスにないフォントでもユーザーがそのフォントで見ることができます。WEBフォントの入れ方はまたそのうち記事書きますね。
font-familyの指定に便利なツール
Font-familyメーカー byサルカワ
https://saruwakakun.com/font-family
上記のURLにアクセスするとFont-familyメーカーが開けます。
各デバイスで使えるフォントの一覧がみれるのと、下の欄にドラッグ&ドロップでfont-familyを作成し、コピペで簡単にオリジナルのfont-familyを指定できます。
font-familyの誤った指定方法や、注意点
× 存在しないフォントや読み込んでないフォントを指定
font-family: "aiueo-font", "リュウミン";
※iphoneは読み込めないフォントを指定したままだと、明朝体になってしまうので注意!!!
× 日本語名のフォントを(" ")ダブルクォーテーションで閉じない
font-family: ヒラギノ角ゴ ProN;
まとめ
フォントはデザイナーにもよって使うフォントが全然違うし、デバイスによっても使えるフォントが違うので非常に難しいし、悩むことが多いと思います。だからこそマイルールを決めたり、デザイナーと相談したり、便利なツールを使用することで開発の時間を短縮して効率的な作業を目指しましょう!
おそまつ!
(コメント・質問・ソースの指摘等なんでもウェルカムです!初心者の方でも気軽に質問ください!)
Author And Source
この問題について(【初心者でもわかる】font-familyの正しいつけ方・ツールも紹介(2020年 秋版)), 我々は、より多くの情報をここで見つけました https://qiita.com/7note/items/c181429fd1f9fcdb460a著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .