CSS

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

Fontsizelineheight

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

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

|

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

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


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

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

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

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


Website_image00280211_165241


サンプルはヒラギノですので
スタイル部分が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

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

Website_image00280211_172417_2

(*
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」をダウンロード

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

|

[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はこちら
http://force4u.cocolog-nifty.com/skywalker/2016/02/csscss2-0565.html
  

|

Export image file or get Base64 Photoshop layers


Enigma64 – the fastest way to get images from Photoshop


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

Enigma64 - the fastest way to get images from Photoshop - YouTube

|

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

Website_image20110830_11559

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

| | トラックバック (0)

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

Website_image20110501_174053


何回も書いているが
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]等幅フォントの指定"

| | トラックバック (0)

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

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

Website_image20110404_113422

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

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

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

| | トラックバック (0)

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

韓国語のfont-familyの指定は
基本
Website_image20110404_42712
굴림 Gulim
굴림체 GulimChe


바탕 Batang
바탕체 BatangChe

돋움 Dotum
돋움체 DotumChe

궁서 Gungsuh
궁서체 GungsuhChe

새굴림 New Gulim
새바탕 New Batang
새돋움 New Dotum
새궁서 New Gungsuh

ArialUnicodeMS
指定すれば良いと思う


ゴシック体で

Website_image20110404_43021

明朝体で

Website_image20110404_43041

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

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

| | トラックバック (0)

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

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

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

の2通り。

Website_image20110319_180620_2

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

| | コメント (0) | トラックバック (0)

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

こちらの記事の第二弾
【実験】中国語のCSS指定方法【その1明朝体】: Smiles and Smiles to Go【実験】中国語のCSS指定方法【その1明朝体】: Smiles and Smiles to Go:新しいウィンドで開きます


Image00230206_05244

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

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

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

「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のフォントを指定する事で対応可能だろうか?

もう少し調べてみたい

| | コメント (0) | トラックバック (0)

その他のカテゴリー

Accessibility | AccessibilityCheck | AccessibilityForm | AccessibilityInDesign | AccessibilityPDF | Acrobat | Acrobat Action | Acrobat Annotation | Acrobat AppleScript | Acrobat Layer | Acrobat Plug-ins | Acrobat Portfolios | Acrobat Print | AcrobatBarcode | AcrobatDialog | AcrobatForm | AcrobatJS | AcrobatMenu | AcrobatPDF | AcrobatStamp | AcrobatYouTube | AddressBook | Adobe | Adobe InDesign | AdobeAppleScript | AdobeBridge | AdobeIllustrator | AdobeJSX | aed | Alfresco | Android | AnimationGif | Apple | AppleScript | AppleScriptBasics | AppleScriptCharacter | AppleScriptColor | AppleScriptDroplet | AppleScriptErrorNum | AppleScriptFolder | AppleScriptFontBook | AppleScriptRename | AppleScriptTools | AppleSymbols | Applications | Barcode | Barcode2D | BarcodePostal | BetterHTMLExport | Book | Browser | buzz | Certificates | CharacterEntity | CharacterSets | Colors | Cool Site | CSS | Cutting | DecoMail | DecorationMail | Design | Desktop | Diff | DJ | dmg | DNS | Documents | Download | eBook | Editer | eMail | Envelopes | ExifTool | Facebook | FFmpeg | File System | Fonts | FontsTool | FontsWeb | FOOD | FormPrint | ftp | Gadget | Gif Animation | Google | HexEditor | HTML | info | iPhoto | ISBN | ISO | iTunes | iWork | iWorkNumbers | iWorkNumbersCalendar | iWorkNumbersTimecard | iWorkPages | JavaScript | JeditX | JeditX Regexp | JeditXAppleScript | JIS | jquery | Letterpress | Library | logo | Mac Admin | Mac Archiver | Mac Browser | Mac Browser Plugin | Mac QuickLook | Mac Spotlight | Mac Video | Map | Mobby | Moto | Movies | Music | Network Basic | ntp | OCR | Office | OSX | Pantone | Paper | PDFlib | Permission | Photo | Pictograms | Print | Public | QuickLook | QuickTime | QuickTimeSetting | QuickTimeSound | Real Media | ReName | ResourceFork | ruby | Screen | ScreenCast | Search | Security | SEO | Sharing | SLAResource | Spotlight | Stamp | SWF | Tutorial PSD | TV | Twitter | Typography | Unicode | Utilities | Video | WebFont | Wedding | Windows | WindowsMedia | XML | XMP | XPS | YouTube | YouTube Rss