紙媒体中心の人にはピンと来ないかも

読んで損ないです。時間のある時にぜひ
http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

少し自分でもやってみると良いですね。

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

その１は
https://force4u.cocolog-nifty.com/skywalker/2016/02/csscss-838a.html

繰り返しになりますが
CSSのフォント指定はあくまでも『ファミリ名』ですが
フォントを指定する場合に有効なのが

PostScript名
フル・フォント名
ファミリー名+ウェイト名
フォント・ファミリー名　を指定出来ると、各ブラウザで表示出来るわけです。

ポイントは
ローカライズ名ではなく英語で指定するのがセオリー

英語でフォントの各種名称を取得する場合
有効なのが
表示言語の一時変更での
フォントブックでの取得が簡単でしょう

サンプルはヒラギノですので
スタイル部分がW3になっていますが
ウェイトを取得出来る事もあります。

それ以外の方法だと
mdls
スポットライトコマンドで取得出来ます。

/usr/bin/mdls -name com_apple_ats_names
/usr/bin/mdls -name com_apple_ats_name_full
/usr/bin/mdls -name com_apple_ats_name_fond
/usr/bin/mdls -name com_apple_ats_name_family
/usr/bin/mdls -name com_apple_ats_name_postscript
/usr/bin/mdls -name com_apple_ats_name_style

スクリプトにするとこんな感じ

(*

com_apple_ats_name_family.scpt

Uniform Type Identifiers Reference

public.truetype-collection-fontを指定していますが

異なるファミリーが同封されている場合は

全てのファミリは取得出来ません。

フォントブックを英語モードに切り替えて利用する事をお勧めします

*)

-----ファインダー呼び出し

tell application "Finder"

activate

---ファイルを選択　TTF　TTC　OTF　PS1のみ選べます　Font Suitcase等は選べません

set objResult to ¬

choose file default location (path to fonts folder from user domain) ¬

of type ¬

{"public.truetype-ttf-font", "public.truetype-collection-font", "public.opentype-font", "com.apple.truetype-datafork-suitcase-font", "com.adobe.postscript-lwfn​-font"} invisibles true ¬

with multiple selections allowed without showing package contents

end tell

set theLogFile to "" as text

----繰り返しのはじまり

repeat with objFiles in objResult

----ファインダー処理

tell application "Finder"

----取得したファイルのエリアスを取得

set theFileIAlias to objFiles as alias

----ファイル名を取得

set theFontName to (name of (info for objFiles) as list) as text

----フォントがあるディレクトリを取得

set theFileDir to (container of objFiles) as text

----UNIXパスにしておきます

set theUnixFilePath to (POSIX path of theFileIAlias) as text

end tell

-----mdlsのコマンドを実行して格納

set theMdlsResult to do shell script "/usr/bin/mdls -name com_apple_ats_name_postscript \"" & theUnixFilePath & "\""

-----区切り文字を改行に設定

set AppleScript's text item delimiters to {"\r"}

-----改行毎のリストとして格納

set theResultList to (every text item of theMdlsResult) as list

-----区切り文字を戻す

set AppleScript's text item delimiters to {""}

-----何行あるか？(データ件数）を数える

set numListLine to (count of theResultList) as number

set theLineData to (item 2 of theResultList) as text

set theResultText to my doReplace(theLineData, "\t", "") as text

set theResultText to my doReplace(theResultText, "\"", "") as text

set theResultText to my doReplace(theResultText, ",", "") as text

set theResultTextPostscript to my doReplace(theResultText, " ", "") as text

set theMdlsResult to "" as text

-----mdlsのコマンドを実行して格納

set theMdlsResult to do shell script "/usr/bin/mdls -name com_apple_ats_name_family \"" & theUnixFilePath & "\""

-----区切り文字を改行に設定

set AppleScript's text item delimiters to {"\r"}

-----改行毎のリストとして格納

set theResultList to (every text item of theMdlsResult) as list

-----区切り文字を戻す

set AppleScript's text item delimiters to {""}

-----何行あるか？(データ件数）を数える

set numListLine to (count of theResultList) as number

set theLineData to (item 2 of theResultList) as text

set theResultText to my doReplace(theLineData, "\t", "") as text

set theResultText to my doReplace(theResultText, "\"", "") as text

set theResultText to my doReplace(theResultText, ",", "") as text

set theResultTextFamily to my doReplace(theResultText, " ", "") as text

set theMdlsResult to "" as text

-----mdlsのコマンドを実行して格納

set theMdlsResult to do shell script "/usr/bin/mdls -name com_apple_ats_name_full \"" & theUnixFilePath & "\""

-----区切り文字を改行に設定

set AppleScript's text item delimiters to {"\r"}

-----改行毎のリストとして格納

set theResultList to (every text item of theMdlsResult) as list

-----区切り文字を戻す

set AppleScript's text item delimiters to {""}

-----何行あるか？(データ件数）を数える

set numListLine to (count of theResultList) as number

set theLineData to (item 2 of theResultList) as text

set theResultText to my doReplace(theLineData, "\t", "") as text

set theResultText to my doReplace(theResultText, "\"", "") as text

set theResultText to my doReplace(theResultText, ",", "") as text

set theResultTextFull to my doReplace(theResultText, " ", "") as text

-----mdlsのコマンドを実行して格納

set theMdlsResult to do shell script "/usr/bin/mdls -name com_apple_ats_name_style \"" & theUnixFilePath & "\""

-----区切り文字を改行に設定

set AppleScript's text item delimiters to {"\r"}

-----改行毎のリストとして格納

set theResultList to (every text item of theMdlsResult) as list

-----区切り文字を戻す

set AppleScript's text item delimiters to {""}

-----何行あるか？(データ件数）を数える

set numListLine to (count of theResultList) as number

set theLineData to (item 2 of theResultList) as text

set theResultText to my doReplace(theLineData, "\t", "") as text

set theResultText to my doReplace(theResultText, "\"", "") as text

set theResultText to my doReplace(theResultText, ",", "") as text

set theResultTextStyle to my doReplace(theResultText, " ", "") as text

set theLogFile to theLogFile & "\r\rcom_apple_ats_name_postscript\r" & theResultTextPostscript & "\r\rcom_apple_ats_name_family\r" & theResultTextFamily & "\r\rcom_apple_ats_name_full\r" & theResultTextFull & "\r\rcom_apple_ats_name_style\r" & theResultTextStyle & "\r\r" as text

log theLogFile

end repeat

return theLogFile

---------文字の置き換えサブルーチン

to doReplace(theText, orgStr, newStr)

set oldDelim to AppleScript's text item delimiters

set AppleScript's text item delimiters to orgStr

set tmpList to every text item of theText

set AppleScript's text item delimiters to newStr

set tmpStr to tmpList as text

set AppleScript's text item delimiters to oldDelim

return tmpStr

end doReplace

「apple_ats_name_family.scpt.zip」をダウンロード

その３に続く
https://force4u.cocolog-nifty.com/skywalker/2016/02/csscss3fontbook.html

[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
　　

Export image file or get Base64 Photoshop layers

インラインでイメージをCSSに書く人用

【実験】中国語のCSS指定方法【その3繁体字指定】

続きを読む "【実験】中国語のCSS指定方法【その3繁体字指定】"

[CSS]等幅フォントの指定

何回も書いているが
CSSでのフォント指定におてい
『狙い撃ち』する場合

【1】PostScript 名　で記述する
【2】フルネーム　で記述する
【3】ファミリー　で記述する
【4】generic-family を記述する

以上を守っても
OPERAでは反映されないので
ある程度割り切って指定した方が良いですね。

OSAKAの等幅の場合
以下のようになります。

【1】PostScript 名：Osaka-Mono
【2】フルネーム：'Osaka−等幅'
【3】ファミリー：Osaka
【4】generic-family： monospace

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

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

続きを読む "[CSS]等幅フォントの指定"

[CSS]Opera11(Mac) は韓国語フォントのGulimを表示出来ない

Gulimは字形としては
『丸ゴシック』系なのですが
Opera11(Mac)では表示出来ない

サンプル
「Gulim.html」をダウンロード

「Gulim.html.txt」をダウンロード

続きを読む "[CSS]Opera11(Mac) は韓国語フォントのGulimを表示出来ない"

【実験】韓国語のCSS指定を考える

韓国語のfont-familyの指定は
基本

굴림 Gulim
굴림체 GulimChe


바탕 Batang
바탕체 BatangChe

돋움 Dotum
돋움체 DotumChe

궁서 Gungsuh
궁서체 GungsuhChe

새굴림 New Gulim
새바탕 New Batang
새돋움 New Dotum
새궁서 New Gungsuh
に
ArialUnicodeMS
指定すれば良いと思う

ゴシック体で

明朝体で

※serif指定なのにArialUnicodeMSがあったりするのは矛盾だが表示されてナンボなので良しとする

続きを読む "【実験】韓国語のCSS指定を考える"

[OPERA]OPERA11MacはCSSを使って小塚ゴシックを表示出来ない

OPERA11のCSSを使って小塚ゴシックを表示出来ない。
OPERAユーザーがレアである事から

■気にしないで使う
■小塚ゴシックでデザインしない

の２通り。

続きを読む "[OPERA]OPERA11MacはCSSを使って小塚ゴシックを表示出来ない"

【実験】中国語のCSS指定方法【その２ゴシック体】

こちらの記事の第二弾
【実験】中国語のCSS指定方法【その１明朝体】: Smiles and Smiles to Go

フォントの構成上留意すべき点は上記の図の通り

結論
■日本語と中国語が混在する文章の場合ゴシック体指定は少しわかりにくい

ゴシック体
サンプルファイル

「Heiti.html」をダウンロード
「Sung.html」をダウンロード

font-family:
HiraginoSansGB-W3,
'Hiragino Sans GB W3',
'Hiragino Sans GB',
AdobeHeitiStd-Regular,
'Adobe Heiti Std R',
'Adobe Heiti Std',
SimHei,
STHeiti,
STHeiti,
LiHeiPro,
'LiHei Pro',
SIL-Hei-Med-Jian,
'Hei Regular',
Hei,
STHeitiSC-Medium,
'黒体-簡 ミディアム',
'黒体-簡',
KaiTi,
MicrosoftYaHei,
'Microsoft YaHei',
GB18030Bitmap,
New-Gulim,
'New Gulim',
ArialUnicodeMS,'Arial Unicode MS',Arial, sans-serif !important;
}

 
font-family:
AdobeFanHeitiStd-Bold,
'Adobe Fan Heiti Std B',
'dobe Fan Heiti Std',
MicrosoftJhengHeiRegular,
'Microsoft JhengHei',
LiSungLight,
'Apple LiSung ライト',
'Apple LiSung',
LiHei,
'LiHei Pro',
LiGothicMed,
'Apple LiGothic ミディアム',
'Apple LiGothic',
STHeitiTC-Medium,
'黒体-繁 ミディアム',
'黒体-繁',
DFKaiShu-SB-Estd-BF,
'BiauKai レギュラー',
BiauKai,
New-Gulim,
'New Gulim',
ArialUnicodeMS,'Arial Unicode MS',Arial, sans-serif !important;

 
Windowsの場合は
ArialUnicodeMSを指定すればこと足りるかもしれない
Macの場合は色々考慮すべき点があるが
Adobeのフォントを指定する事で対応可能だろうか？

もう少し調べてみたい