Tôi có cái này .psd(tệp Photoshop) và tôi đang cố gắng chuyển đổi nó thành HTML & CSS.
Điều duy nhất tôi không thể xác định là họ đã sử dụng phông chữ nào trong .psd
Làm cách nào tôi có thể tìm ra phông chữ nào được sử dụng trong tệp Photoshop?
Câu trả lời:
Phụ thuộc vào cách bạn muốn trích xuất thông tin.
Chọn công cụ Văn bản ( biểu tượng T có serif) và nhấp vào vùng văn bản để chỉnh sửa nó. Nó sẽ hiển thị phông chữ nào đang được sử dụng trong cửa sổ Ký tự.
Điều này sẽ liệt kê tất cả các phông chữ có thể nhúng được sử dụng trong tệp PSD, miễn là bạn có thể nhúng chúng.
Trong công cụ Ký tự, đi đến phần chọn phông chữ thả xuống. Cuối danh sách sẽ là các phông chữ được sử dụng trong hình ảnh nhưng bị thiếu trong hệ thống của bạn. Chúng thường sẽ bị mờ đi.
Nếu bạn thấy bất kỳ hình ảnh rasterized nào bạn cần mặt phông chữ, tốt nhất bạn chỉ xuất phần đó dưới dạng hình ảnh độc lập, rõ ràng và sử dụng một dịch vụ như What the Font để xác định phông chữ.
Lưu tập lệnh này dưới dạng tệp mới trong thư mục Photoshop> Cài đặt sẵn> Tập lệnh. Đặt tên cho nó bất cứ điều gì bạn muốn, chẳng hạn như "Phát hiện 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.',);
}
Các định dạng tập tin PSD được ghi nhận bởi Adobe - bạn có thể đọc nó như thế nào lưu trữ thông tin phông chữ.
Sau đó, bạn có thể kiểm tra kết xuất hex của tệp và sử dụng đặc tả định dạng tệp để tìm phông chữ.
Ngoài ra, tên phông chữ phải hiển thị trong đầu ra của stringstiện ích được tìm thấy trên các hệ thống Linux / Unix.
Điều này thực sự rất dễ thực hiện bằng cách sử dụng các tập lệnh PS, có thể lặp qua các lớp của PSD và kéo dữ liệu của lớp văn bản.
Gần đây tôi đã thử nghiệm một tập lệnh dựa trên JavaScript để phủ trực tiếp thông tin phông chữ trên các comps được phân phối cho các nhà phát triển. Nó chưa kết thúc nhưng nếu vẫn còn hứng thú (tôi thấy điều này khá cũ) tôi có thể đưa ra một phiên bản nhanh và bẩn chỉ đơn giản là bật lên các phông chữ được sử dụng trong một cửa sổ.
CẬP NHẬT: Tôi kết hợp một phiên bản "lite" thô nhưng hoạt động của kịch bản tôi đang phát triển. Hãy đóng góp - https://github.com/davidklaw/completer . Đối với những người không quen thuộc với tập lệnh, chỉ cần lấy tệp tập lệnh và đặt nó trong thư mục PS Presets / Sc scripts của bạn và nó sẽ có sẵn trong Tệp -> Tập lệnh.
Cách nhanh chóng và dễ dàng để tìm các phông chữ bị thiếu
Windows -> Ký tự Một hộp ký tự nhỏ sẽ hiển thị với thông tin phông chữ.
Chọn thả xuống tên phông chữ và cuộn xuống cho đến khi kết thúc.
Bạn sẽ nhận thấy danh sách các phông chữ bị thiếu trong màu xám nhạt ở cuối danh sách phông chữ.
Từ: http://www.bala-krishna.com/how-to-find-fonts- used-in-sheet-file/
Nếu văn bản đã được rasterized, cách dễ dàng là cắt vùng với kiểu chữ bạn muốn xác định, lưu dưới dạng .png và tải nó lên WhatTheFont , nơi nó có thể cho bạn biết đó là gì, trừ khi nó là là một cái tối nghĩa hoặc bespoke.
Identifont là một trang web khác mà bạn có thể sử dụng, nơi bạn mô tả các đặc điểm của kiểu chữ.
Tôi sẽ chụp nhanh văn bản bạn cần (tốt nhất là phóng to) và sử dụng WhatTheFont để có được một số dự đoán. (Tuy nhiên, không nên hiển thị kiểu chữ khi bạn mở PSD và chọn văn bản tương ứng?)
Và tất nhiên, nếu đó không phải là một phông chữ an toàn trên web, bạn sẽ cần tìm một cách thích hợp để thay thế nó hoặc cung cấp một ngăn xếp dự phòng.
Sử dụng trích xuất đám mây sáng tạo
Nó sẽ liệt kê tất cả các phông chữ được sử dụng (trong số những thứ tiện dụng khác).
Dựa trên câu trả lời ban đầu của David (DetectFonts.jsx), tôi đã sửa đổi tập lệnh để khắc phục sự cố được Drew báo cáo trong các nhận xét: Tìm tất cả các phông chữ được sử dụng trong tệp Photoshop .
Thực hiện theo các hướng dẫn ban đầu nhưng thay vào đó hãy sử dụng phần thân tập lệnh này - chỉ khác biệt là một vài kiểm tra null (có thể là sự khác biệt về phiên bản photoshop hoặc điều gì đó thiếu dữ liệu về các loại đối tượng cụ thể, có khả năng là nhà thiết kế hoặc hệ điều hành cụ thể)
Tôi cũng sẽ gửi yêu cầu kéo tới 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.');
}
Sử dụng công cụ trực tuyến để lấy phông chữ của tệp psd
Nhà phát triển đã hỏi tôi gần như cùng một suy nghĩ như bạn cần. Tôi đã đưa ra cách chỉnh sửa tập lệnh đơn giản, để xuất các thuộc tính lớp (văn bản, tên phông chữ, cỡ chữ, màu phông chữ) mà bạn cần khi phát triển, thành một tệp txt duy nhất (nên hoạt động trên máy Windows).
Chỉ cần lưu cái này như "ExportTexts.js" và đặt Adobe Photoshop> Presets> Sc scripts.
Sau đó, chạy (hoặc khởi động lại) Photoshop và chạy tập lệnh (Tệp -> Tập lệnh -> ExportTexts). Cũng đảm bảo rằng bạn đã tách nhóm tất cả các lớp trước khi làm điều này. Tệp đã xuất phải ở cùng một thư mục với tệp 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
Có tiện ích mở rộng / Bảng điều khiển Photoshop miễn phí có thể thực hiện công việc này cho bạn, Trình phát hiện phông chữ Photoshop miễn phí ( http://www.layerhero.com/photoshop-font-detector/ ) và nếu bạn muốn thu thập / sao chép tệp phông từ hệ thống thư mục, hãy thử Photoshop Art Packer ( http://www.layerhero.com/photoshop-art-packer/ )
Tôi muốn biết phông chữ tài liệu cùng với kiểu dáng, kích thước, màu sắc, định dạng, v.v. để phát triển web và mục đích CSS, vì vậy đây là những gì tôi nghĩ ra:
Để lấy thông tin phông chữ dưới dạng tệp PSD, bạn có thể sử dụng các công cụ trực tuyến nếu bạn không thể hoặc không sử dụng Photoshop (hoặc nếu bạn thích sử dụng Gimp, điều đó sẽ làm mờ phông chữ PSD).
Ví dụ: bạn có thể dùng thử trình trích xuất trực tuyến phông chữ PS5 htmlD này "Nhận Phông chữ PSD".
Đó là trình trích xuất thông tin phông chữ PSD dựa trên psd.js của dự án Melitingice Github không yêu cầu tải lên tệp, hoạt động cục bộ trong trang trình duyệt của bạn