Photoshopファイルで使用されているすべてのフォントを検索

adobe-photoshop fonts

この.psd(Photoshopファイル)を持っているのですが、これをHTML & CSSに変換しようとしています

判断できないのは.psdで使われていたフォントだけ

Photoshopファイルで使用されているフォントを調べるにはどうすればいいですか?

  55  dave  2011-04-09


ベストアンサー

情報を抽出する方法にもよりますが

セクションまたはテキストエリアごと

テキストツール(セリフ付きのTアイコン)を選択し、テキストエリアをクリックして編集します。文字ウィンドウで使用されているフォントが表示されます

使用している全フォントが一目でわかる

  1. 画像ドキュメントをPDFとして保存または書き出します
  2. Adobe ReaderでPDF版を開きます
  3. ファイル → プロパティ → フォント を選択

これは、PSDファイル内で使用されているすべての埋め込み可能なフォントをリストアップします

Missing fonts

文字ツールで、フォントの選択ドロップダウンに移動します。リストの最後には、画像で使用されているがシステムにないフォントが表示されます。これらのフォントは通常グレーアウトされています

Rastersized images

フォントの顔が必要なラスタライズされた画像があれば、その部分だけを明確なスタンドアロン画像としてエクスポートして、What the Fontのようなサービスを使用してフォントを決定するのがベストだと思います

64  random  2011-11-13


このスクリプトを新規ファイルとして Photoshop > Presets > Scripts フォルダに保存します。名前は “Detect Fonts.jsx “のように好きな名前をつけてください

var p = new ActionReference();

function arrayUnique(a){
var t = []
i = a.length;

while(i--) {
var f = false,
n = t.length;

while (n--) {
if(a[i] === t[n]) {
f = true;
}
}

if(!f) {
t.push(a[i]);
}
}
return t;
}

function findFonts() {
p.putEnumerated( charIDToTypeID('Dcmn'), charIDToTypeID('Ordn'), charIDToTypeID('Trgt') );

var c = executeActionGet(p).getInteger(charIDToTypeID('NmbL'))+1,
fonts = [];

while(c--) {
var r = new ActionReference(),
descLayer,
layerStyles,
countStyles;

r.putIndex( charIDToTypeID( 'Lyr ' ), c );

try {
descLayer = executeActionGet(r);
} catch (e) {
continue;
}

if(!descLayer.hasKey(stringIDToTypeID( 'textKey' ))) continue;

layerStyles = descLayer.getObjectValue(stringIDToTypeID('textKey')).getList(stringIDToTypeID('textStyleRange'));
countStyles = layerStyles.count;

while(countStyles--) {
var n = layerStyles.getObjectValue(countStyles).getObjectValue(stringIDToTypeID('textStyle')).getString(stringIDToTypeID('fontPostScriptName'));
fonts.push(n);
}
}

return arrayUnique(fonts).sort();
}

if (documents.length) {
var d = findFonts();
alert(d.length +' fonts found\n'+d.join('\n'));
} else {
alert('No fonts used in the active document.',);
}

enter image description here

24  davidcondrey  2015-04-29


PSDファイル形式は、Adobe社のdocumentedで、フォント情報をどのように保存しているかを読むことができます

その後、ファイルの16進ダンプを調べて、ファイル形式の指定を使ってフォントを見つけることができます

あるいは、Linux/Unix システム上の stringsユーティリティの出力でフォント名が見えるようにしてください

8  RedGrittyBrick  2011-04-09


これは、PSDのレイヤーを反復処理してテキストレイヤーのデータを引き出すことができるPSスクリプトを使用して、実際には非常に簡単に行うことができます

最近、JavaScript ベースのスクリプトを使って、開発者に送られてくるコンプに直接フォント情報をオーバーレイさせる実験をしています。まだ完成していませんが、もしまだ興味があれば (これはかなり古いものだと思いますが)、ウィンドウ内で使用されているフォントをポップアップ表示するだけの簡単なバージョンを用意しています

UPDATE: 私は私が開発しているスクリプトの “lite “バージョンの大まかな作業をまとめました。https://github.com/davidklaw/completerスクリプトに不慣れな方のために、スクリプトファイルをPS Presets/Scriptsフォルダの下に置いておいてください

6  David  2012-07-18


欠落しているフォントを見つけるための迅速かつ簡単な方法

  1. Windows -> 文字 小さな文字ボックスにフォント情報が表示されます

  2. フォント名のドロップダウンを選択し、最後まで下にスクロールします

  3. フォントリストの最後には、ライトグレーで表示されているフォントのリストが表示されています

enter image description here

より。http://www.bala-krishna.com/how-to-find-fonts-used-in-psd-file/

4  Praveen Vijayan  2014-10-14


テキストがすでにラスタライズされている場合、簡単な方法は、識別したい書体で領域をトリミングして.pngとして保存し、WhatTheFontにアップロードすることです

Identifontも書体の特徴を記述するサイトです

3  paradroid  2011-01-25


私はあなたが必要とするテキストのスナップを取るだろう(できればズームイン)といくつかの推測を得るためにWhatTheFontを使用しています。(PSDを開いてそれぞれのテキストを選択したときに書体が表示されるべきではないでしょうか?)

そしてもちろん、ウェブセーフフォントでない場合は、適切な置き換え方法を見つけるか、フォールバックスタックを提供する必要があります

1  roguesys  2011-04-09


Creative Cloud Extractを使用します

使用されているすべてのフォントをリストアップしてくれます(他の便利なものの中では)

1  skube  2015-01-08


Davidさんの元の回答(DetectFonts.jsx)に基づいて、コメントでDrewさんが報告した問題を修正するためにスクリプトを修正しました。Photoshop ファイルで使用されているすべてのフォントを検索する

元の指示に従いますが、代わりにこのスクリプト本体を使用してください – 唯一の違いは、いくつかのヌルチェック(おそらくPhotoshopのバージョンの違いか、または特定のオブジェクトタイプのデータが不足していると何かを行うために、デザイナーやオペレーティングシステム固有の可能性があります)です

私もhttps://github.com/dcondrey/DetectFontsinPSDにプルリクエストを出します

var p = new ActionReference();

function arrayUnique(a) {
var t = []
i = a.length;

while (i--) {
var f = false,
n = t.length;

while (n--) {
if (a[i] === t[n]) {
f = true;
}
}

if (!f) {
t.push(a[i]);
}
}
return t;
}

function findFonts() {
p.putEnumerated(charIDToTypeID('Dcmn'), charIDToTypeID('Ordn'), charIDToTypeID('Trgt'));

var c = executeActionGet(p).getInteger(charIDToTypeID('NmbL')) + 1,
fonts = [];

while (c--) {
var r = new ActionReference(),
descLayer,
layerStyles,
countStyles;

r.putIndex(charIDToTypeID('Lyr '), c);

try {
descLayer = executeActionGet(r);
} catch (e) {
continue;
}

if (!descLayer.hasKey(stringIDToTypeID('textKey'))) continue;

layerStyles = descLayer.getObjectValue(stringIDToTypeID('textKey')).getList(stringIDToTypeID('textStyleRange'));
if(!layerStyles) continue;

countStyles = layerStyles.count;

while (countStyles--) {
var textStyle = layerStyles.getObjectValue(countStyles).getObjectValue(stringIDToTypeID('textStyle'));
if(!textStyle || !textStyle.hasKey(stringIDToTypeID('fontPostScriptName'))) continue;

var n = textStyle.getString(stringIDToTypeID('fontPostScriptName'));
fonts.push(n);
}
}

return arrayUnique(fonts).sort();
}

if (documents.length) {
var d = findFonts();
alert(d.length + ' fonts found\n' + d.join('\n'));
} else {
alert('No fonts used in the active document.');
}

1  agrath  2019-10-17


Photoshopを開きます。Windows “文字 “に移動します。小さなボックスがポップアップします。テキストレイヤーを選択するだけで、ボックスはフォントファミリ、サイズなどを教えてくれます

0  Jack  2011-05-21


psdファイルのフォントを取得するためにオンラインツールを使用してください

http://psdfonts.com/

0  Ahsan Idrisi  2013-09-26


開発者から、ほぼ同じようなことを聞かれた。開発時に必要なレイヤーのプロパティ(テキスト、フォント名、フォントサイズ、フォントカラー)を1つのtxtファイル(Windowsマシン上で動作するはず)にエクスポートする編集用の簡単なスクリプトを思いついた

これを「ExportTexts.js」のように保存して、Adobe Photoshop > Presets > Scriptsに入れるだけです

その後、Photoshopを起動(または再起動)し、スクリプト(File -> Scripts -> ExportTexts)を実行します。また、この作業を行う前に、すべてのレイヤーがグループ化されていないことを確認してください。エクスポートされたファイルは、psdファイルと同じディレクトリにあるはずです

if (documents.length > 0)
{
var docRef = activeDocument;
CurrentFolder = activeDocument.path;
var outputFile = new File(CurrentFolder + "/" + activeDocument.name + "fonts.txt" );
outputFile.open("w");
for (var i = docRef.layers.length-1 ; i >=0 ; i--)
{
docRef.activeLa`enter preformatted text here`yer = docRef.layers[i]
if (docRef.activeLayer.kind == LayerKind.TEXT)
{
outputFile.write(
docRef.activeLayer.textItem.contents + "\n" +
docRef.activeLayer.textItem.font +"," +
docRef.activeLayer.textItem.size +"," +
docRef.activeLayer.textItem.color.rgb.hexValue  + "\n\n\n");
}
}
outputFile.close();
alert("Finished");
}
else
{
alert("You must have at least one open document to run this script!");
}
docRef = null

0  van  2013-11-17


Free Photoshop Font Detector (http://www.layerhero.com/photoshop-font-detector/)、システムフォルダからフォントファイルを収集/コピーしたい場合は、Photoshop Art Packer(http://www.layerhero.com/photoshop-art-packer/)を試してみてください

0  user3110420  2014-05-06


レイヤー] タブには、すべてのレイヤーをフィルタリングしてフォントだけを表示するオプションがあります。実際にそれらを見るためには各レイヤーを選択する必要がありますが、それはそれらを素早く見る必要がある場合にのみ有用です

この質問から3年後に誰かの役に立てることを願っています

0  edrpls  2014-09-27


Web開発やCSS目的でドキュメントフォントをスタイル、サイズ、色、書式などとともに知りたいと思っていたので、思いついたのがこちらです

  1. レイヤーパネルの「T」アイコンをクリックすると、テキストレイヤーのみをフィルタリング/表示することができます
  2. レイヤーパレットの一番上のテキストレイヤーをShift + 左クリックします
  3. レイヤーパレットの一番下までスクロールして、一番下のテキストレイヤーをShift + 左クリックします
  4. レイヤーパレットで選択したレイヤーを右クリックし、「レイヤーの複製」を選択します
  5. 送信先ドキュメント] で [新規作成] を選択します
  6. すべてのテキストレイヤーが含まれているはずの新しいドキュメントに移動します
  7. テキストのすべてのレイヤーを再度選択します(ステップ2と3を参照)
  8. レイヤーパレットの下部にあるフォルダアイコンをクリックして、すべてのテキストレイヤーを1つのグループにします
  9. グループのブレンドモード(レイヤーパレットのドロップダウン)を「通常」に変更します
  10. 新しいグループを右クリックします
  11. CSSをコピー」を選択
  12. ドキュメントに貼り付けて、必要に応じてスタイルのリストをフォーマットしてください!

0  cfx  2019-03-11


フォント情報をPSDファイルから取得するには、Photoshopを使用することができない、または使用しない場合は、オンラインツールを使用することができます(またはPSDフォントをラスタライズするGimpを使用することを好む場合)

たとえば、このhtml5 PSDフォントオンライン抽出器 “PSDフォントを取得する “を試してみることができます

それはファイルをアップロードする必要がないMelitingice Githubプロジェクトpsd.jsをベースにしたPSDフォント情報抽出ツールで、ブラウザのページでローカルに動作します

-1  Giovazz89  2016-05-09


タイトルとURLをコピーしました