[CSS]フォントの各名称とCSS【その１】

フォントには、色々な名称がありますよね。
ファミリー名だったり
ウェイトだったり
ここから記載する内容は、あくまでも『私の』私見ですんで…
参考にする程度でお願いします。

私は、
フォントの指定があり
かつ
上流からCSSの記述に指定が無い場合は以下のように指定しています。

p{
font-size: 36pt;
font-family:

/* PostScript名 (PostScript Name) */
'KozGoPro-Heavy',

/* フル・フォント名 (Full Font Name) */
'Kozuka Gothic Pro H',

/* ファミリー名+ウェイト名 (Font Family Name + PostScript Font Weight又はSubFamily名) */
'Kozuka Gothic Pro Heavy',

/* フォント・ファミリー名 (Preferred Family又はFont Family Name) */
'Kozuka Gothic Pro',

/* 上記が無い場合 serif, sans-serif, cursive, fantasy, monospace*/
sans-serif;

/* normal , italic, , obliqueで↑に指定したフォントに対応している事 */
font-style: normal;

/* normal , bold, bolder, lighter 100-400-700-900 */
font-weight: 800;

}

CSSのfont-family:は本来
『フォントファミリ』を指定するのであって
『フォント』を指定する物ではありませんが
『フォントを直に指定する事が出来る』といった認識でいれば間違いはありません。

----------------------
まずは最初に
PostScript名 (PostScript Name)
'HiraMaruProN-W4',

これはフォントブックで確認出来ますね。

----------------------
次が
フル・フォント名 (Full Font Name)
'Hiragino Maru Gothic ProN W4',

これは、ファインダで確認出来ます。

フォントブックのフルネームは『日本語ローカライズ』されていますので
英語のフルネームを利用します

----------------------
ファミリー名+ウェイト名
(Font Family Name + PostScript Font Weight又はSubFamily名)
（TTの場合Preferred Family + Preferred Subfamileになります）
'Kozuka Gothic Pro Heavy',

フォントファミリを指定してその後に半角スペースを入れてウェイトを指定します。
ウェイト部分を『サブファミリ』を指定する事で有効になる場合もあります
これは一部のブラウザで有効です。

小塚のウェイト部

遊ゴの場合

----------------------
そして
フォント・ファミリー名
(Preferred Family又はFont Family Name)
'Kozuka Gothic Pro',
ここも、ローカライズされた日本語名称は使わずに
英語のファミリー名を利用します。

----------------------
ここが重要！
フォントのウェイトは指定フォントになるように
正しく指定します
/* normal , bold, bolder, lighter 100-400-700-900 */
font-weight: 400;

私の場合は以下のようにしています。
（ケースバイ、ケースで時々違います。

/* 以下はだいたいこんなもんじゃね？的な
100:Thin ExLight
200:Light
300:Roman
400:Regular Medium
500:Medium Regular
600:Semibold
700:Bold
800:Heavy
900:ExHeavy
*/

----------------------
重複する場合は、前から省略して

サンプルは以下

「meiryo.html」をダウンロード

「MeiryoUI.html」をダウンロード

「HGMaruGothicMPRO.html」をダウンロード

「KozGoPro-Heavy.html」をダウンロード

「HiraMaruProN-W4.html」をダウンロード

「Osaka-Mono.html」をダウンロード

「YuGothL.html」をダウンロード

----------------------

フォントの名称は色々あって
TT　PS　で違いますが、取得できるようにしておくと良いでしょう

オープンタイプだとCID名称なんかも指定されていたりします

続く

その２はこちら
https://force4u.cocolog-nifty.com/skywalker/2016/02/csscss2-0565.html