私はこれ.psd
(Photoshopファイル)を持っていて、それをHTMLとCSSに変換しようとしています。
私が判断できない唯一のことは彼らが.psd
でどんなフォントを使ったかということです
Photoshopファイルで使用されているフォントを確認するにはどうすればよいですか。
情報の抽出方法によって異なります。
テキストツール(Tアイコンとセリフ)を選択し、テキスト領域をクリックして編集します。文字ウィンドウで使用されているフォントが表示されます。
埋め込み可能であれば、PSDファイルに 使用されているすべての埋め込みフォントの一覧 が表示されます。
文字ツールで、フォント選択ドロップダウンに移動します。リストの最後には、画像で使用されているがシステムにないフォントが表示されます。これらは通常グレーアウトされます。
あなたがフォントフェイスを必要とするラスタライズされたイメージを見るならば、あなたはそのセクションだけをはっきりした、スタンドアローンのイメージとしてエクスポートし、そしてフォントを決定するために What the Font のようなサービスを使うのが一番です。
このスクリプトを新しいファイルとしてPhotoshop>プリセット>スクリプトフォルダに保存します。 「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.',);
}
PSDファイルフォーマットはアドビによって 文書化された です - あなたはそれがどのようにフォント情報を格納するか読むことができます。
その後、ファイルの16進ダンプを調べ、ファイル形式の指定を使用してフォントを見つけることができます。
あるいは、フォント名はLinux/Unixシステムにあるstrings
utilityの出力に見えるはずです。
これは実際にはPSスクリプトを使用して行うのが非常に簡単で、PSDのレイヤーを繰り返し処理してテキストレイヤーデータを取得することができます。
私は最近、JavaScriptベースのスクリプトを試して、開発者に配布されるコンプにフォント情報を直接オーバーレイすることを試みています。まだ完成していませんが、それでもまだ興味がある場合(これはかなり古いと思います)、ウィンドウで使用されているフォントをポップアップ表示する簡単なバージョンを作成できます。
UPDATE:私が開発しているスクリプトの大まかな、しかし実用的な "lite"バージョンをまとめました。貢献すること自由に感じなさい - https://github.com/davidklaw/completer 。スクリプトに不慣れな人は、スクリプトファイルをPS Presets/Scriptsフォルダに置くだけで、File - > Scriptsの下に表示されます。
不足しているフォントを見つけるための迅速かつ簡単な方法
Windows - > Characterフォント情報とともに小さな文字ボックスが表示されます。
フォント名ドロップダウンを選択して最後までスクロールします。
フォントリストの最後に、見つからないフォントのリストが薄い灰色で表示されます。
投稿者: http://www.bala-krishna.com/how-to-find-fonts-used-in-psd-file/
テキストがすでにラスタライズされている場合は、識別したい書体で領域を切り取り、.pngとして保存して にアップロードするのが簡単な方法です。 WhatTheFont 、それがあいまいなものでない限り、それが何であるかを伝えることができるはずです。
Identifont は、書体の特性を説明する別のサイトです。
私はあなたが必要とするテキストのスナップショットを撮り(できればズームイン)そして推測を得るために WhatTheFont を使うでしょう。 (ただし、PSDを開いてそれぞれのテキストを選択したときに書体が表示されないようにする必要がありますか?)
そしてもちろん、それがWebセーフフォントではない場合は、それを置き換えるか、代替スタックを提供する適切な方法を見つける必要があります。
Creative Cloud Extractを使用
それは(他の便利なものの中でも)使用されているすべてのフォントをリストします。
[レイヤー]タブには、フォントのみを表示するようにすべてのレイヤーをフィルタ処理するためのオプションがあります。実際にそれらを見るためには各層を選択しなければなりません、そしてそれはあなたがそれらを一瞥する必要がある場合にだけ有用です
これが求められてから3年後に誰かに役立つことを願っています。
Web開発やCSSの目的のために、ドキュメントのフォントをスタイル、サイズ、色、フォーマットなどと一緒に知りたいのです。
Photoshopを開きます。 ウィンドウズ"キャラクターへ行きます。小さな箱がポップアップします。テキストレイヤを選択すると、ボックスにフォントファミリ、サイズなどが表示されます。
あなたのためにこの仕事をすることができる無料のPhotoshop Extension/Panelがあります、Free Photoshop Font Detector( http://www.layerhero.com/photoshop-font-detector/ )、およびシステムフォルダからフォントファイルを収集/コピーする場合は、Photoshop Art Packerを試してください( http://www.layerhero.com/photoshop-art-packer/ )
開発者は私にあなたが必要としているのと同じように考えるようにほとんど尋ねました。簡単なスクリプトを編集して、開発時に必要なレイヤープロパティ(テキスト、フォント名、フォントサイズ、フォントカラー)を単一のtxtファイルにエクスポートすることを考えました(Windowsマシンで動作するはずです)。
これを "ExportTexts.js"のように保存して、Adobe Photoshop>プリセット>スクリプトに追加するだけです。
その後、Photoshopを実行(または再起動)してスクリプトを実行します([ファイル] - > [スクリプト] - > [ExportText])。また、これを行う前に、すべてのレイヤーをグループ解除したことを確認してください。エクスポートされたファイルは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
オンラインツールを使ってpsdファイルのフォントを取得する