CSSの記述に使用する特定のPSDファイルのフォント情報をエクスポートする方法

私はフロントエンドの開発を行っているので、この質問はその観点から来ています。受け取ったら.psd、デザイン内の各フォントを手動で確認してクリックし、文字パネルを使用してフォント、色、サイズ、カーニングなどを取得します。ときどき、いくつかの異なるフォントを使用するデザインが表示されます（4+ ）同じフォントの多くのバリエーション（サイズ、色、太さなど）があります。これはかなり退屈な作業です... Photoshopが使用されているすべてのフォントとそのバリエーションのリストをエクスポートできるとにかくありますか？たとえば、次のようなリストです。

Arial太字16px黒
Arial通常14px黒
Arial通常14px青
Oswald 32px rgb（13,74,56）
...

これについて何か提案はありますか？さらに、この情報を要素の上に置くだけのプラグインがある場合、それは素晴らしいでしょう！

ありがとう。

もちろん、ExtendScript Toolkitを使用して、Photoshopドキュメントを調査および操作できます。詳細については、ドキュメントを確認するか、さまざまなPSスクリプトフォーラムを検索してください。

この記事のスクリプトに基づいて、次のスクリプトを作成しました。PSDファイル内のすべてのテキストレイヤーについて、フォント、フォントサイズ、および塗りつぶし色をJavaScriptコンソールに出力します。

function run(){
    var layerSets = app.activeDocument.layerSets;
    dumpLayerSets(layerSets);

    $.writeln("Top-level layers:");
    dumpLayers(app.activeDocument.layers);

}

function dumpLayerSets(layerSets){
    $.writeln("--- Processing...");
    var len = layerSets.length;
    for(var i=0;i<len;i++){
         var layerSet = layerSets[i];
         //$.writeln(layerSet.name);
         dumpLayers(layerSet.artLayers);
    }
}

function dumpLayers(layers){
    var len = layers.length;
    for(var i=0;i<len;i++){
         var layer = layers[i];
         if(layer.kind==undefined){
                continue;
         }
        if(layer.kind == LayerKind.TEXT){
         $.writeln('font: '+ layer.textItem.font +' font-size: ' + layer.textItem.size + ' color: #' + layer.textItem.color.rgb.hexValue);
        }
    }
}
run();

テストするには、Photoshopでテキストレイヤーを含むドキュメントを開きます。ExtendScript Toolkitを開き、Photoshopインスタンスにリンクします。上記のコードをワークスペースに貼り付け、実行ボタンをクリックします。

このファイルに基づく：

次の出力を受け取りました：

--- Processing...
Top-level layers:
font: MyriadPro-It font-size: 144 pt color: #0000FF
font: MyriadPro-Bold font-size: 144 pt color: #00FF00
font: MyriadPro-Regular font-size: 144 pt color: #FF0000
Result: undefined

フォトショッププラグインSpecKingには、フォトショップファイル内のすべての活版印刷仕様を表示/生成するオプションがあります。私自身は試していませんが、便利なようです。

CSSフォントマッチングは、フルネーム（「Myriad Pro Bold」など）またはPostScript名（「MyriadPro-Bold」など）ではなく、フォントファミリー名に基づいていることに注意してください。OSX上のChrome / SafariはPostScript名と一致しますが、これは非標準の動作であり、Firefoxでは機能せず、Windowsベースのブラウザーでは機能しません。CSSで使用するには、PostScript名をfamily / weight / styleの組み合わせにマップする必要があるため、MyriadPro-BoldItの代わりに：

font-family: Myriad Pro;
font-weight: bold;
font-style:  italic;

等

PSD（およびその他の情報）をPSDから抽出できるプラグイン/サービスがあります。

• アボコード
• CSSHat
• プロジェクトパフェ
• CSS3PS

私はこれが少し前に尋ねられたことを知っていますが、この情報を提供することができるウェブサイトPSDFonts.comもあります（ただし、オーバーレイは提供されません）。