Temukan semua font yang digunakan dalam file Photoshop

Saya punya ini .psd(file Photoshop) dan saya mencoba mengubahnya menjadi HTML & CSS.

Satu-satunya hal yang saya tidak dapat menentukan adalah font apa yang mereka gunakan di .psd

Bagaimana saya bisa mengetahui font apa yang digunakan dalam file Photoshop?

Tergantung pada bagaimana Anda ingin mengekstraksi informasi.

Per bagian atau area teks

Pilih alat Teks ( ikon T dengan serif) dan klik area teks untuk mengeditnya. Ini akan menunjukkan font apa yang digunakan di jendela Character.

Sekilas font yang digunakan

1. Simpan atau ekspor dokumen gambar sebagai PDF
2. Buka versi PDF dalam Adobe Reader
3. Pilih File → Properties → Font

Ini akan mencantumkan semua font yang dapat disematkan yang digunakan dalam file PSD, asalkan Anda dapat menyematkannya.

Font tidak ada

Di alat Karakter, pergi ke drop-down pemilihan font. Di akhir daftar akan ada font yang digunakan dalam gambar tetapi hilang dari sistem Anda. Ini biasanya akan diklik.

Gambar raster

Jika Anda melihat gambar raster yang membutuhkan font, Anda sebaiknya hanya mengekspor bagian itu sebagai gambar yang jelas dan mandiri dan menggunakan layanan seperti What the Font untuk menentukan font.

Simpan skrip ini sebagai file baru di folder Photoshop> Preset> Script Anda. Beri nama apa pun yang Anda inginkan, seperti "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.',);
}

Format file PSD didokumentasikan oleh Adobe - Anda dapat membaca cara menyimpan informasi font.

Anda kemudian dapat memeriksa dump hex file dan menggunakan spesifikasi format file untuk menemukan font.

Atau, nama font harus terlihat dalam output stringsutilitas yang ditemukan pada sistem Linux / Unix.

Ini sebenarnya sangat mudah dilakukan dengan menggunakan skrip PS, yang dapat beralih melalui lapisan PSD Anda dan menarik data lapisan teks.

Saya baru-baru ini bereksperimen dengan skrip berbasis JavaScript untuk melapisi informasi font langsung pada comps yang dikirim ke pengembang. Itu belum selesai tetapi jika masih ada minat (saya melihat ini sudah cukup lama) saya dapat memasang versi cepat dan kotor yang hanya memunculkan font yang digunakan di jendela.

UPDATE: Saya membuat versi naskah "lite" yang kasar tapi berfungsi, yang sedang saya kembangkan. Jangan ragu untuk berkontribusi - https://github.com/davidklaw/completer . Bagi mereka yang tidak terbiasa dengan skrip, ambil saja file skrip dan letakkan di bawah folder PS Preset / Scripts Anda dan itu akan tersedia di bawah File -> Scripts.

Cara Cepat dan Mudah Untuk Menemukan Font yang Hilang

1. Windows -> Karakter Kotak karakter kecil akan ditampilkan dengan informasi font.

2. Pilih dropdown nama font dan gulir ke bawah sampai akhir.

3. Anda akan melihat daftar font yang hilang dalam warna abu-abu terang di akhir daftar font.

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

Jika teks telah diraster, cara termudah adalah memotong area dengan jenis huruf yang ingin Anda identifikasi, menyimpan sebagai .png dan mengunggahnya ke WhatTheFont , di mana teks itu dapat memberi tahu Anda apa itu, kecuali adalah yang tidak jelas atau dipesan lebih dahulu.

Identifont adalah situs lain yang dapat Anda gunakan, di mana Anda menggambarkan karakteristik jenis huruf.

Saya akan mengambil sepintas teks yang Anda butuhkan (sebaiknya diperbesar) dan menggunakan WhatTheFont untuk mendapatkan beberapa tebakan. (Namun, bukankah tipografi akan ditampilkan saat Anda membuka PSD dan memilih teks yang sesuai?)

Dan tentu saja, jika itu bukan font yang aman untuk web, Anda harus menemukan cara yang tepat untuk menggantinya, atau menyediakan tumpukan cadangan.

Gunakan Creative Cloud Extract

Ini akan mencantumkan semua font yang digunakan (di antara hal-hal praktis lainnya).

Berdasarkan jawaban asli David (DetectFonts.jsx), saya telah memodifikasi skrip untuk memperbaiki masalah yang dilaporkan oleh Drew dalam komentar: Temukan semua font yang digunakan dalam file Photoshop .

Ikuti petunjuk asli tetapi gunakan badan skrip ini sebagai gantinya - hanya perbedaan adalah beberapa pemeriksaan nol (mungkin perbedaan versi photoshop atau ada hubungannya dengan data yang hilang pada jenis objek tertentu, kemungkinan perancang atau sistem operasi spesifik)

Saya juga akan mengirimkan permintaan penarikan ke 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.');
}

Buka Photoshop. Pergi ke Windows »Character . Sebuah kotak kecil akan muncul. Cukup pilih layer teks dan kotak akan memberi tahu Anda jenis font, ukuran, dan sebagainya.

Gunakan alat online untuk mendapatkan font file psd

http://psdfonts.com/

Pengembang bertanya kepada saya berpikir hampir sama seperti yang Anda butuhkan. Saya datang dengan mengedit skrip sederhana, untuk mengekspor properti layer (teks, nama font, ukuran font, warna font) yang Anda butuhkan ketika mengembangkan, ke file txt tunggal (harus bekerja pada mesin Windows).

Simpan saja ini seperti "ExportTexts.js" dan masukkan ke dalam Adobe Photoshop> Preset> Script.

Setelah itu, jalankan (atau restart) Photoshop dan jalankan script (File -> Scripts -> ExportTexts). Pastikan juga Anda memisahkan semua lapisan sebelum melakukan ini. File yang diekspor harus dalam direktori yang sama dengan file 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

Ada Panel / Ekstensi Photoshop gratis yang dapat melakukan pekerjaan ini untuk Anda, Gratis Photoshop Font Detector ( http://www.layerhero.com/photoshop-font-detector/ ), dan jika Anda ingin mengumpulkan / menyalin file font dari sistem folder, coba Photoshop Art Packer ( http://www.layerhero.com/photoshop-art-packer/ )

Ada opsi pada tab Layers yang memungkinkan Anda memfilter semua layer untuk hanya menampilkan font. Anda harus memilih setiap layer untuk benar-benar melihatnya dan ini berguna hanya jika Anda perlu melihatnya sekilas

Semoga ini bisa membantu seseorang tiga tahun setelah ini diminta.

Saya ingin mengetahui font dokumen beserta gaya, ukuran, warna, pemformatan, dll. Untuk pengembangan web dan tujuan CSS, jadi inilah yang saya kemukakan:

1. Klik ikon "T" di panel Layers untuk memfilter / hanya melihat lapisan teks
2. Shift + klik kiri lapisan teks paling atas di palet Layers
3. Gulir sampai ke bagian bawah palet Layers dan Shift + klik kiri layer teks bawah
4. Klik kanan pada lapisan yang dipilih dalam palet Layers dan pilih "Duplicate Layers"
5. Di bawah Dokumen Tujuan, pilih Baru
6. Pergi ke dokumen baru Anda yang harus berisi semua lapisan teks Anda
7. Pilih semua lapisan teks lagi (lihat langkah # 2 dan # 3)
8. Klik ikon folder di bagian bawah palet Layers untuk membuat semua layer teks menjadi satu grup
9. Ubah blending mode grup (dropdown pada palet layer) menjadi "Normal"
10. Klik kanan grup baru Anda
11. Pilih "Salin CSS"
12. Tempel ke dokumen dan format daftar gaya Anda sesuai kebutuhan!

Untuk mendapatkan informasi font dari file PSD, Anda dapat menggunakan alat online jika Anda tidak bisa atau tidak akan menggunakan Photoshop (atau jika Anda lebih suka menggunakan Gimp, yang merasterisasi font PSD).

Misalnya Anda dapat mencoba ekstraktor online font html5 PSD ini "Dapatkan Font PSD".

Ini adalah ekstraktor informasi font PSD berdasarkan proyek Melitingice Github psd.js yang tidak memerlukan pengunggahan file, bekerja secara lokal di halaman browser Anda