Cách xuất thông tin phông chữ cho một tệp PSD cụ thể để sử dụng khi viết CSS

Tôi đang làm dev front-end, vì vậy câu hỏi này xuất phát từ quan điểm đó. Khi tôi nhận được một .psdcách thủ công tôi đi qua từng phông chữ trong thiết kế, nhấp vào nó, sau đó sử dụng bảng ký tự để lấy phông chữ, màu sắc, kích thước, k sâu, v.v. Đôi khi, tôi nhận được một thiết kế sử dụng một số phông chữ khác nhau (4+ ) với nhiều biến thể của cùng một phông chữ (kích thước, màu sắc, trọng lượng, v.v.). Đây là một công việc khá tẻ nhạt ... Có cách nào mà Photoshop có thể xuất một danh sách tất cả các phông chữ được sử dụng và các biến thể của chúng không? Ví dụ: một danh sách như:

Arial đậm 16px đen
Arial thường 14px đen
Arial thường 14px xanh
Oswald 32px rgb (13,74,56)
...

Bất kỳ đề nghị cho điều này? Hơn nữa, nếu có một plugin các loại sẽ đặt thông tin này lên các yếu tố sẽ rất tuyệt vời!

Cảm ơn.

Chắc chắn, bạn có thể sử dụng Bộ công cụ ExtendScript để điều tra và thao tác với các tài liệu Photoshop. Để biết thêm thông tin, hãy kiểm tra tài liệu hoặc tìm kiếm trên các diễn đàn kịch bản PS khác nhau.

Dựa trên kịch bản trong bài viết này , tôi đã viết kịch bản sau đây. Đối với mỗi lớp văn bản trong một PSDtệp, nó sẽ in phông chữ, cỡ chữ và tô màu cho bảng điều khiển javascript:

function run(){
    var layerSets = app.activeDocument.layerSets;
    dumpLayerSets(layerSets);

    $.writeln("Top-level layers:");
    dumpLayers(app.activeDocument.layers);

}

function dumpLayerSets(layerSets){
    $.writeln("--- Processing...");
    var len = layerSets.length;
    for(var i=0;i<len;i++){
         var layerSet = layerSets[i];
         //$.writeln(layerSet.name);
         dumpLayers(layerSet.artLayers);
    }
}

function dumpLayers(layers){
    var len = layers.length;
    for(var i=0;i<len;i++){
         var layer = layers[i];
         if(layer.kind==undefined){
                continue;
         }
        if(layer.kind == LayerKind.TEXT){
         $.writeln('font: '+ layer.textItem.font +' font-size: ' + layer.textItem.size + ' color: #' + layer.textItem.color.rgb.hexValue);
        }
    }
}
run();

Để kiểm tra, hãy mở một tài liệu với các lớp văn bản trong Photoshop. Mở Bộ công cụ ExtendScript và liên kết nó với phiên bản Photoshop của bạn. Dán mã ở trên vào không gian làm việc và nhấn nút chạy.

Dựa trên tập tin này:

Tôi đã nhận được đầu ra sau đây:

--- Processing...
Top-level layers:
font: MyriadPro-It font-size: 144 pt color: #0000FF
font: MyriadPro-Bold font-size: 144 pt color: #00FF00
font: MyriadPro-Regular font-size: 144 pt color: #FF0000
Result: undefined

Plugin photoshop SpecKing có một tùy chọn để hiển thị / tạo tất cả các thông số kỹ thuật chính tả trong tệp photoshop của bạn - điều đó có giúp được không? Tôi đã không thử bản thân mình, nhưng nó có vẻ hữu ích.

Hãy nhớ rằng việc khớp phông chữ CSS dựa trên tên họ phông chữ , không phải tên đầy đủ (ví dụ: "Myriad Pro Bold") hoặc tên PostScript (ví dụ: "MyriadPro-Bold"). Chrome / Safari trên OSX sẽ khớp với tên PostScript nhưng đó là hành vi không chuẩn, nó sẽ không hoạt động trong Firefox và nó sẽ không hoạt động trong bất kỳ trình duyệt dựa trên Windows nào. Để sử dụng trong CSS, bạn sẽ cần ánh xạ tên PostScript thành các kết hợp gia đình / trọng lượng / kiểu, vì vậy thay vì MyriadPro-BoldIt:

font-family: Myriad Pro;
font-weight: bold;
font-style:  italic;

Vân vân.

Có các plugin / dịch vụ cho phép bạn trích xuất thông tin này (và các thông tin khác) từ PSDs:

• Avocode
• CSSHat
• Dự án Parfait
• CSS3PS

Tôi biết điều này đã được hỏi cách đây một thời gian nhưng cũng có một trang web, PSDFonts.com , có thể cung cấp thông tin này cho bạn (mặc dù nó sẽ không cung cấp lớp phủ).