Найти все шрифты, используемые в файле Photoshop

У меня есть это .psd(файл Photoshop), и я пытаюсь преобразовать его в HTML & CSS.

Единственное, что я не могу определить, это какой шрифт они использовали в .psd

Как я могу узнать, какие шрифты были использованы в файле Photoshop?

Зависит от того, как вы хотите извлечь информацию.

По разделу или текстовой области

Выберите инструмент «Текст» ( значок T с засечками) и щелкните текстовую область, чтобы отредактировать ее. Он покажет, какой шрифт используется в окне символов.

Все шрифты, используемые с первого взгляда

1. Сохранить или экспортировать документ с изображением в формате PDF
2. Откройте PDF-версию в Adobe Reader
3. Выберите Файл → Свойства → Шрифты.

В этом списке будут перечислены все встраиваемые шрифты, используемые в файле PSD, при условии, что вы можете встраивать их.

Недостающие шрифты

В инструменте «Символ» перейдите в раскрывающийся список выбора шрифта. В конце списка будут шрифты, которые используются в изображении, но отсутствуют в вашей системе. Они обычно будут серыми.

Растеризованные изображения

Если вы видите растеризованные изображения, для которых нужен шрифт, лучше всего экспортировать только этот раздел в виде четкого автономного изображения и использовать сервис, например « Что за шрифт», для определения шрифта.

Сохраните этот скрипт как новый файл в папке 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.',);
}

Формат файла PSD задокументирован Adobe - вы можете прочитать, как он хранит информацию о шрифтах.

Затем вы можете проверить шестнадцатеричный дамп файла и использовать спецификацию формата файла, чтобы найти шрифты.

Кроме того, имена шрифтов должны быть видны в выходных данных stringsутилиты, найденной в системах Linux / Unix.

Это на самом деле очень легко сделать с помощью сценариев PS, которые могут перебирать слои вашего PSD и извлекать данные текстового слоя.

В последнее время я экспериментировал со скриптом на основе JavaScript, чтобы накладывать информацию о шрифтах непосредственно на композиции, которые доставляются разработчикам. Это не закончено, но если все еще есть интерес (я вижу, что это довольно старый), я могу поставить быструю и грязную версию, которая просто выскакивает шрифты, используемые в окне.

ОБНОВЛЕНИЕ: я собрал грубую, но работающую "облегченную" версию сценария, который я разрабатываю. Не стесняйтесь вносить свой вклад - https://github.com/davidklaw/completer . Для тех, кто не знаком со сценариями, просто возьмите файл сценария и поместите его в папку PS Presets / Scripts, и он будет доступен в меню Файл -> Сценарии.

Быстрый и простой способ найти недостающие шрифты

1. Windows -> Символ. В окне маленького символа отобразится информация о шрифтах.

2. Выберите название шрифта выпадающего и прокрутите вниз до конца.

3. Вы увидите список отсутствующих шрифтов светло-серого цвета в конце списка шрифтов.

От: http://www.bala-krishna.com/how-to-find-fonts-used-in-psd-file/

Если текст уже был растеризован, простым способом было бы обрезать область шрифтом, который вы хотите идентифицировать, сохранить как .png и загрузить его в WhatTheFont , где он должен быть в состоянии сказать вам, что это такое, если только неясный или сделанный на заказ.

Identifont - это еще один сайт, который вы можете использовать, где вы описываете характеристики гарнитуры.

Я бы сделал снимок нужного вам текста (желательно увеличенного масштаба) и использовал WhatTheFont, чтобы получить некоторые догадки. (Не следует ли показывать гарнитуру при открытии PSD и выборе соответствующего текста?)

И, конечно же, если это не веб-безопасный шрифт, вам нужно найти подходящий способ его замены или предоставления резервного стека.

Используйте Creative Cloud Extract

В нем будут перечислены все используемые шрифты (среди прочих удобных вещей).

Основываясь на первоначальном ответе Дэвида (DetectFonts.jsx), я изменил сценарий, чтобы исправить проблему, о которой сообщил Дрю в комментариях: найдите все шрифты, используемые в файле 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.');
}

Откройте Photoshop. Перейти в Windows »Персонаж . Появится небольшая коробка. Просто выберите текстовый слой, и поле покажет вам семейство шрифтов, размер и так далее.

Используйте онлайн-инструмент, чтобы получить шрифты PSD-файла

http://psdfonts.com/

Разработчик попросил меня почти так же подумать, как и тебе нужно. Я придумал редактировать простой скрипт, чтобы экспортировать свойства слоя (текст, имя шрифта, размер шрифта, цвет шрифта), которые вам нужны при разработке, в один текстовый файл (должен работать на компьютере с 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

Существует бесплатное расширение / панель Photoshop, которая может выполнить эту работу за вас, Free Photoshop Font Detector ( http://www.layerhero.com/photoshop-font-detector/ ), и если вы хотите собирать / копировать файлы шрифтов из системы папку, попробуйте Photoshop Art Packer ( http://www.layerhero.com/photoshop-art-packer/ )

На вкладке «Слои» есть опция, позволяющая фильтровать все слои, чтобы отображались только шрифты. Вы должны выбрать каждый слой, чтобы увидеть их, и это полезно, только если вам нужно быстро взглянуть на них

Надеюсь, это поможет кому-то через три года после того, как это спросили.

Я хотел знать шрифты документов вместе с их стилями, размерами, цветами, форматированием и т. Д. Для веб-разработки и в целях CSS, поэтому я пришел к следующему:

1. Нажмите значок «T» на панели «Слои», чтобы отфильтровать / просмотреть только текстовые слои.
2. Shift + левый клик на верхнем текстовом слое в палитре слоев
3. Прокрутите весь путь до нижней части палитры слоев и, удерживая клавишу Shift, щелкните левой кнопкой мыши нижний текстовый слой.
4. Щелкните правой кнопкой мыши на выбранных слоях в палитре слоев и выберите «Дублировать слои»
5. В пункте «Документ назначения» выберите «Новый».
6. Перейти к вашему новому документу, который должен содержать все ваши текстовые слои
7. Выберите все слои текста еще раз (см. Шаги № 2 и № 3)
8. Щелкните значок папки в нижней части палитры «Слои», чтобы объединить все текстовые слои в одну группу.
9. Измените режим смешивания группы (выпадающий в палитре слоев) на «Нормальный»
10. Щелкните правой кнопкой мыши новую группу
11. Выберите «Копировать CSS»
12. Вставьте в документ и отформатируйте список стилей по мере необходимости!

Чтобы получить информацию о шрифтах из PSD-файла, вы можете использовать онлайн-инструменты, если вы не можете или не будете использовать Photoshop (или если вы предпочитаете использовать Gimp, который растеризует PSD-шрифты).

Например, вы можете попробовать этот онлайн-экстрактор шрифтов PSD html5 «Get PSD Fonts».

Это экстрактор информации о шрифтах PSD, основанный на проекте Melitingice Github psd.js , который не требует загрузки файлов и работает локально на странице вашего браузера.