[CSS]フォントの各名称とCSS【その1】
フォントには、色々な名称がありますよね。
ファミリー名だったり
ウェイトだったり
ここから記載する内容は、あくまでも『私の』私見ですんで…
参考にする程度でお願いします。
私は、
フォントの指定があり
かつ
上流から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
*/
----------------------
重複する場合は、前から省略して
サンプルは以下
「HGMaruGothicMPRO.html」をダウンロード
----------------------
フォントの名称は色々あって
TT PS で違いますが、取得できるようにしておくと良いでしょう
オープンタイプだとCID名称なんかも指定されていたりします
続く
その2はこちら
https://force4u.cocolog-nifty.com/skywalker/2016/02/csscss2-0565.html
| 固定リンク
「CSS」カテゴリの記事
- 紙媒体中心の人にはピンと来ないかも(2017.02.19)
- [CSS]フォントの各名称とCSS【その2】(2016.02.11)
- [CSS]フォントの各名称とCSS【その1】(2016.02.11)
- Export image file or get Base64 Photoshop layers(2013.03.29)
- CSS3(2010.12.21)
「Fonts」カテゴリの記事
- [Fontbook]fontbookに実装されているVermilionBird朱雀(2023.10.23)
- [macOS14]Asset_Font6にしか無いフォント(2023.10.15)
- [PDF]文字サイズの標準化の歴史をたどる(2023.06.30)
- 書体選び(2021.12.24)
- どう違う? 「字体」「字形」「書体」「フォント」(2021.12.01)