查找Photoshop文件中使用的所有字体


54

我有这个.psd(Photoshop文件),正在尝试将其转换为HTML和CSS。

我唯一无法确定的是他们在 .psd

如何找出Photoshop文件中使用的字体?


截至CC2018,以下两个脚本和jsx插件已损坏。我专门针对每个评论。
提请

Answers:


63

取决于您要如何提取信息。

每节或文字区域

选择文本工具(带衬线的T图标),然后单击文本区域以对其进行编辑。它将显示“字符”窗口中正在使用的字体。

所有字体一目了然

  1. 将图像文档保存或导出为PDF
  2. 在Adobe Reader中打开PDF版本
  3. 选择文件→属性→字体

这将列出 PSD文件中使用的所有可嵌入字体,前提是您可以嵌入它们。

缺少字体

在“字符”工具中,转到字体选择下拉列表。列表的末尾将是图像中使用的字体,但系统中缺少这些字体。这些通常将显示为灰色。

光栅图像

如果看到需要光栅化字体的任何光栅化图像,则最好仅将该部分导出为清晰的独立图像,并使用诸如“字体”之类的服务来确定字体。


23

将此脚本另存为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.',);
}

在此处输入图片说明


1
+500000点 难以置信。
半疯狂的东西'16


要在剪贴板中写文本,请使用以下答案:stackoverflow.com/a/13983268/1578857
Dima Kurilo

(Photoshop CC2018)错误8500:请求的属性不存在。第53行:var n = layerStyles.getObjectValue(countStyles).getObjectValue(stringIDToTypeID('textStyle'))。getString(stringIDToTypeID('fontPostScriptName'));
提请

@Drew我对与脚本的固定的版本发布更新的答案
agrath

8

PSD文件格式记录由Adobe -你可以看它如何存储字体信息。

然后,您可以检查文件的十六进制转储,并使用文件格式规范来查找字体。

另外,字体名称应该strings在Linux / Unix系统上的实用程序输出中可见。


2
+1:我想出了相同的解决方案。由于某种原因,GIMP无法正确导入PSD,并且我不知道使用了哪种字体。我在HEX编辑器中分析了PSD文件以找到它(搜索:“字体”为TEXT)。推荐编辑:“祝福”。
lepe

5

使用PS脚本实际上很容易做到,它可以遍历PSD的各层并提取文本层的数据。

最近,我一直在尝试使用基于JavaScript的脚本来将字体信息直接覆盖在提供给开发人员的comps上。它还没有完成,但是如果仍然有兴趣(我认为这已经很老了),我可以提出一个简单快捷的版本,该版本会弹出窗口中使用的字体。

更新:我整理了正在开发的脚本的粗略但有效的“精简”版本。随时贡献-https://github.com/davidklaw/completer。对于那些不熟悉脚本的人,只需将脚本文件放入PS Presets / Scripts文件夹下,即可在File-> Scripts下使用。


这个问题可能很旧,但已有近6,000次浏览。如果您可以提供脚本,将不胜感激!欢迎您成为超级用户!
slhck

好决定。开源GitHub项目已启动。如果有人熟悉基本的JavaScript,他们应该有宾至如归的感觉。
David

哇,这实际上很好用:D(y)!
Ejaz


3

如果文本已经被光栅化,则简单的方法是使用您要识别的字体裁剪区域,另存为.png并将其上传到WhatTheFont,它应该能够告诉您它是什么,除非它是晦涩或定制的。

Identifont是您可以使用的另一个站点,您可以在其中描述字体的特征。


文本未栅格化,这意味着其位于单独的图层中。
dave

2
@Dave:如果文本仍可编辑,则只需将其选中,然后查看字体下拉菜单或信息面板上显示的内容。这真的很明显!
paradroid

1

我会花一点时间来查找您需要的文本(最好是放大),然后使用WhatTheFont进行猜测。(但是,当您打开PSD并选择相应的文本时,是否不显示字体?)

当然,如果它不是网络安全的字体,则需要找到一种适当的方式来替换它或提供备用堆栈。



1

基于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.');
}

0

打开Photoshop。转到Windows»字符。一个小盒子会弹出。只需选择文本层,然后该框就会告诉您字体的字体,大小等。



0

开发人员问我几乎与您需要的想法相同。我想出了编辑简单脚本的方法,可以将开发时需要的图层属性(文本,字体名称,字体大小,字体颜色)导出到单个txt文件中(应在Windows计算机上使用)。

只需将其保存为“ ExportTexts.js”,然后放入Adobe Photoshop>预设>脚本即可。

之后,运行(或重新启动)Photoshop并运行脚本(文件->脚本-> 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

您的脚本在第8行上中断了
davidcondrey

并在第12行上。错误8500,属性不存在:outputFile.write(。–
Drew

0

有一个免费的Photoshop Extension / Panel可以为您完成这项工作,免费的Photoshop字体检测器(http://www.layerhero.com/photoshop-font-detector/),以及是否要从系统收集/复制字体文件文件夹,请尝试使用Photoshop Art Packer(http://www.layerhero.com/photoshop-art-packer/


“免费的Photoshop Font Detector”不再提供免费下载,现在是昂贵的扩展FontHero的一部分,价格为39美元
paulmz

这些都不可用。LayerHero已死。.令人惊讶的是,您可以从WayBack机器下载字体检测器:web.archive.org/web/20171211184218/http ://www.layerhero.com/… 但是,我无法安装它,也没有安装使用Anastasiy的扩展管理器或Adobe ExMan。
提请

0

在“层”选项卡上有一个选项,可让您过滤所有层以仅显示字体。您必须选择每个图层才能真正看到它们,并且仅在需要快速浏览它们时才有用

希望这对被问到三年后的人有帮助。


0

我想了解文档字体以及它们的样式,大小,颜色,格式等,以用于Web开发和CSS用途,因此,我想到了以下内容:

  1. 单击“图层”面板中的“ T”图标以仅过滤/查看文本图层
  2. Shift +左键单击“图层”调板中最顶层的文本图层
  3. 一直滚动到“图层”调板的底部,然后按Shift +左键单击底部的文字层
  4. 右键单击“图层”调板中的选定图层,然后选择“复制图层”
  5. 在“目标文档”下,选择“新建”
  6. 转到新文档,其中应包含所有文本图层
  7. 再次选择所有文本层(请参阅步骤2和3)
  8. 单击“图层”调板底部的文件夹图标,将所有文本图层归为一组
  9. 将群组的混合模式(图层面板中的下拉菜单)更改为“普通”
  10. 右键单击您的新组
  11. 选择“复制CSS”
  12. 粘贴到文档中,然后根据需要设置样式列表的格式!

-1

要从PSD文件中获取字体信息,可以使用在线工具(如果不能或不使用Photoshop,或者可以使用Gimp来光栅化PSD字体)。

例如,您可以尝试使用此html5 PSD字体在线提取器 “ Get PSD Fonts”。

这是一个基于Melitingice Github项目psd.js的PSD字体信息提取器,不需要上载文件,可以在浏览器页面上本地工作


它会使用javascript在您自己的浏览器页面中打开文件,而无需将其发送到服务器!您必须删除文件以指定文件路径...
Giovazz89 '16

您可能希望披露与上述项目的任何隶属关系,即使它是免费的。
Journeyman Geek
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.