« Notting Hill | トップページ | [CSS]フォントの各名称とCSS【その2】 »

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

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

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

Website_image00280211_144840

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',

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

Website_image00280211_110330


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

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

Website_image00280211_110709

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

Website_image00280211_110451

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

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

小塚のウェイト部

Website_image00280211_132710

遊ゴの場合

Website_image00280211_110724

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

Website_image00280211_110619

----------------------
ここが重要!
フォントのウェイトは指定フォントになるように
正しく指定します
/* 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名称なんかも指定されていたりします

Website_image00280211_113747


続く


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

|

« Notting Hill | トップページ | [CSS]フォントの各名称とCSS【その2】 »

CSS」カテゴリの記事

Fonts」カテゴリの記事