查找Photoshop文件中使用的所有字体。
我有这个.psd
(Photoshop文件),我想把它转换成HTML&CSS。
我唯一不能确定的是他们在.psd
我怎么才能找到Photoshop文件中使用的是什么字体?
我有这个.psd
(Photoshop文件),我想把它转换成HTML&CSS。
我唯一不能确定的是他们在.psd
我怎么才能找到Photoshop文件中使用的是什么字体?
取决于你想如何提取信息。
选择文本工具(T图标,带衬线)并点击文本区域进行编辑。它将在字符窗口中显示正在使用的字体。
1.保存或导出图像文档为PDF 2. 在Adobe Reader中打开PDF版本 3. 选择 “文件"→"属性"→"字体 ”
这将列出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文件格式是Adobe公司的文档 - 你可以阅读它是如何存储字体信息的。
然后你可以检查文件的十六进制转储,并使用文件格式规范来查找字体。
另外,字体名称应该在Linux/Unix系统的strings
utility的输出中可见。
其实使用PS脚本是很容易做到的,它可以迭代你的PSD的各层,并提取文本层数据。
我最近一直在尝试使用一个基于JavaScript的脚本,将字体信息直接叠加在交付给开发者的comps上。它还没有完成,但如果大家还有兴趣的话(我看这是个很老的版本),我可以放出一个简单的弹出窗口中使用的字体的快速版本。
UPDATE: 我把我正在开发的脚本的一个粗略但可以使用的 “精简 "版本放在一起。欢迎贡献自己的力量– https://github.com/davidklaw/completer 。对于那些不熟悉脚本的人来说,只要把脚本文件放在你的PS预设/脚本文件夹下,它就可以在文件->脚本下找到。
快速简单地查找丢失的字体
1.Windows ->字符 一个小的字符框将显示字体信息。
选择字体名称下拉菜单,然后向下滚动直到结束。
你会发现在字体列表的最后,有一个浅灰色的缺失字体列表。
From : http://www.bala-krishna.com/how-to-find-fonts-used-in-psd-file/
如果文字已经栅格化了,简单的方法是把你想识别的字体区域裁剪下来,保存为.png,然后上传到 WhatTheFont ,在那里它应该能告诉你它是什么,除非它是一个不知名的或定制的。 Identifont 是另一个你可以使用的网站,在那里你可以描述字体的特征。
根据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.');
}
``` 提交一个 pull 请求。
我会对你需要的文字进行快照(最好是放大),然后使用 WhatTheFont 来进行一些猜测。(当你打开PSD并选择相应的文字时,是不是应该显示出字体呢?)
当然,如果它不是一个web安全的字体,你需要找到一个合适的方法来替换它,或者提供一个后备栈。
有一个免费的Photoshop扩展/面板可以为你做这项工作,Free Photoshop Font Detector http://www.layerhero.com/photoshop-font-detector/ ),如果你想从系统文件夹中收集/复制字体文件,可以尝试Photoshop Art Packer http://www.layerhero.com/photoshop-art-packer/ )。
我想知道文档字体以及它们的样式、大小、颜色、格式等,以便于Web开发和CSS使用,所以我想到了下面的方法。
1.点击图层面板中的 “T "图标,只过滤/查看文本层 2. Shift+左键点击图层面板中最上面的文字图层 3. 一直滚动到 "图层调色板 "的底部,然后Shift +左键单击底部的文本图层 4. 在 "图层调色板 "中右击选中的图层,选择 "复制图层 ” 5. 在 “目标文档 "下,选择 "新建 ” 6. 进入你的新文档,其中应该包含所有的文本图层 7. 再次选择所有的文本层(见步骤#2和#3) 8. 点击 “图层 "调色板底部的文件夹图标,将所有的文本图层合并成一个组 9. 将该组的混合模式(图层调色板中的下拉菜单)改为 "正常” 10. 右键点击新组 11. 选择 “复制CSS” 12. 粘贴到文档中,并根据需要对你的样式列表进行格式化!
使用在线工具获取psd文件的字体 http://psdfonts.com/ 。
开发者问我几乎和你一样的想法。我想出了一个简单的编辑脚本,将你在开发时需要的图层属性(文本、字体名称、字体大小、字体颜色)导出到一个txt文件中(应该可以在Windows机器上使用)。
只需将其保存为 “ExportTexts.js",然后放入Adobe Photoshop> Presets> Scripts。
之后,运行(或重启)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
如果您不会或不愿意使用Photoshop(或者如果您喜欢使用Gimp,它可以光栅化PSD字体),您可以使用在线工具从PSD文件中获取字体信息。
比如你可以试试【这个html5 PSD字体在线提取器】(http://giovannimuzzolini.com/get-psd-fonts/)“获取PSD字体"。
这是一个基于Melitingice Github项目psd.js的PSD字体信息提取器,不需要上传文件,在浏览器页面中本地工作。