Làm cách nào để thiết lập kích thước phông chữ bằng cách đếm pixel?

Tôi có một hình ảnh của một trang web đề xuất.

Làm cách nào để tìm ra giá trị kích thước phông chữ px nào để đặt văn bản bằng cách đếm pixel?

Ví dụ: tôi có cỡ chữ: 14px, (bằng Arial) nhưng đếm từ đầu chữ "L" và xuống đuôi chữ "p", tôi đếm 10 pixel trên chữ "L", có thêm 3 pixel ở đuôi "p". Mà rõ ràng là không cho tôi 14.

Có cách nào để tập luyện giá trị kích thước phông chữ bằng cách đếm pixel đáng tin cậy không?

Vấn đề chung được trả lời khá nhiều bởi kích thước của phông chữ dịch chính xác là bao nhiêu? - tức là kích thước không thực sự có nghĩa là bất cứ điều gì rất cụ thể.

Nhưng do bạn đang làm việc với một phông chữ cụ thể đã biết, bạn thực sự có thể dịch số pixel trên mockup của bạn sang kích thước pixel danh nghĩa của nó - bạn cần thực hiện một chút thử nghiệm để tìm ra tỷ lệ.

Nhưng tôi sẽ đề nghị làm điều này dễ dàng hơn nhiều khi so sánh, tức là chỉ thay đổi kích thước trên trang web của bạn cho đến khi nó khớp với mockup, phủ lên một ảnh chụp màn hình nếu cần thiết để kiểm tra. Hãy nhớ rằng kết xuất phông chữ của trình duyệt của bạn không thể khớp chính xác với kết xuất Photoshop hoặc kết xuất trình duyệt trên nền tảng khác.

Ở kích thước văn bản thông thường, hầu hết các phông chữ có từ 1 đến 4 pixel từ 'đệm' từ trên xuống dưới.

Bạn thường có thể áp dụng trực tiếp kích thước pixel bạn đã sử dụng khi biên dịch CSS. IOW, nếu Photoshop / Illustrator nói 14px trên 130% hàng đầu, CSS của bạn sẽ nói

font-size:14px
line-height:1.3em

Tôi không nghĩ việc đếm pixel là đáng tin cậy. Lý do là, khi tôi quay vòng qua các phông chữ, nói trong Photoshop, chúng luôn hiển thị ở các kích thước ngẫu nhiên. Tôi biết PS không phải là web, nhưng điều này cho thấy rằng 14px trong một phông chữ có thể lớn hơn nhiều so với phông chữ khác.

Tôi đã thành công khi chụp ảnh màn hình vào Photoshop và sắp xếp nó. Tất nhiên bạn cần đảm bảo ảnh chụp màn hình của bạn ở mức 100% và bạn có cùng một phông chữ.

Tuy nhiên, cách tốt nhất và nhanh nhất để xem kích thước phông chữ mà trang web đang sử dụng là xem nguồn trang web. Nếu nó không được đề cập bởi style="font-size: 14px;"một nơi nào đó trong thẻ, thì nó nằm trong biểu định kiểu (nhiều khả năng). Tìm liên kết gần đầu mã trang kết thúc bằng .css và truy cập liên kết đó. Hãy tìm font-sizevà font-familykhai báo. Điều đó sẽ cho bạn biết phông chữ nào được sử dụng và kích thước cho các yếu tố khác nhau của trang web.