GUSSAN-BEEDAN font-familyの個人的最終形
多分に個人的な備忘録。OSやブラウザ環境の変化に追従してアジャストは必要ですが、よっぽどのリクエストがない限り、現時点で使用する font-familyの記述。本サイトも、codeタグ内以外はこの font-family を適用しています。
font-familyを考える上で、個人的に決めた条件が以下。
- 基本的にOSは、Mac、Windows、Linux の安定的な表示を考慮する。（リビジョンは、現行と2世代前あたりまでで、あまりシビアに追いかけない。）
- スマホ（タブレット）は、iOS、Android を考慮する。
- 絵文字も一応、無視しない。
- 当然（かも）ですが、基本ゴシック。
その中で、すこし詳細な条件。
- Macは、10.12 Sierra以上。
- Windowsは、10以上。（だけど、Windows7、8も無視しているわけではない）
- 対象ブラウザは、以下。さようならIE。
Google Chrome , Firefox , Safari , Edge , Safari(iOS) , Chrome(Android) - カッコのみ、約物半角専用のフォントを適用させる。
OS、ガジェットごとのfont指定（優先順位）の考え方
-
まずは、英数字。
Macは、-apple-system, BlinkMacSystemFont
Windowsは、Segoe UI。 日本語の"Yu Gothic"と比べて若干ウェイトが太いので@font-faceで調整。
Androidは、Roboto。 -
次に、日本語。
Macのフォント優先順位は、YuGothic, "Hiragino Sans", sans-serif 。YuGothic, "Hiragino Sans" は、好き嫌いで優先順位を入れ替えてもいい。
Windowsのフォント優先順位は、"Yu Gothic", sans-serif = (Meiryo) -
Linuxは、よくわからないので、"Noto Sans CJK JP"一択。
-
iOSは、"Noto Sans CJK JP"一択。
-
Androidは、sans-serif = ("Droid Sans") 一択。
-
絵文字は、各OSごと、 "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Sans Emoji"。
実装
「Yaku Han JP」を適用させるため約物半角専用フォントCDNのリンクタグをHTML
内に記述。「yakuhanjp_s.css」は、カッコのみに限定した場合。（詳細は、「Yaku Han JP 約物半角専用のフォント」 ）
<!-- HTML：CDNリンクを貼り付け -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@4.0.0/dist/css/yakuhanjp_s.css">上述のfont指定（優先順位）を考慮しつつ、以下、CSSを記述。 なお、@font-faceの記述は、WindowsのChromeで「游ゴシック」font-weight: 400 以下が擦れてしまう件の対応。
/* @font-faceの記述でfont-weightをアジャストする（Windows対応） */
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 100;
}
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 200;
}
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 300;
}
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 400;
}
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Bold");
font-weight: bold;
}
@font-face {
font-family: "Segoe UI";
src: local("Segoe UI");
font-weight: 400;
}
@font-face {
font-family: "Segoe UI";
src: local("Segoe UI");
font-weight: 500;
}
@font-face {
font-family: "Segoe UI";
src: local("Segoe UI Semibold");
font-weight: 700;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, YakuHanJPs, YuGothic, "Yu Gothic", "Hiragino Sans", "Noto Sans CJK JP", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Sans Emoji";
}