12pt trong Photoshop trông hoàn toàn khác nhau trong Web

chúng tôi đang tạo một trang web ngay bây giờ bằng Photoshop và chúng tôi đang sử dụng 12pt cho các phông chữ. Nhưng khi chúng ta thấy các phông chữ trong web với 12pt thì chúng trông lớn hơn nhiều. Có vẻ như chúng ta phải sử dụng 12px trong web để nó trông giống hoặc tương tự.

Vì vậy, câu hỏi của tôi là làm thế nào có thể là 12pt trong photoshop trông khác với 12pt trong web?

Cảm ơn

Vì vậy, câu hỏi của tôi là làm thế nào có thể là 12pt trong photoshop trông khác với 12pt trong web?

Đối với một vài lý do.

1. Chúng là các phương tiện khác nhau với các công cụ kết xuất phông chữ khác nhau. Nói một cách đơn giản, Photoshop không phải là một trình duyệt web. Nó không kết xuất dựa trên CSS và HTML.

2. Điểm, đối với loại đo lường, không phải là một phép đo chính xác. Điểm liên quan đến hộp giới hạn của chữ cái - không phải chính chữ cái. Sự khác biệt trong các tập tin phông chữ và công cụ kết xuất cũng có thể góp phần vào sự khác biệt đó.

3. Các mức DPI và Zoom trong Photoshop so với các mức Zoom trong trình duyệt. Họ có thể chỉ đơn giản là khác nhau.

Ngoài ra, hãy nhớ rằng bạn có thể sẽ không nhận được kết quả khớp từ trình duyệt này đến trình duyệt khác hoặc thậm chí từ thiết bị này sang thiết bị khác. Đơn giản là có quá nhiều biến số ngoài tầm kiểm soát của bạn. Như vậy, người ta không bao giờ nên cho rằng những gì họ xây dựng trong Photoshop sẽ là những gì họ thấy trong trình duyệt. Photoshop đơn giản không phải là một trang web. Nó tốt như một điểm khởi đầu, nhưng đừng coi nó như một bản thiết kế bất động.

Kích thước phông chữ được hiển thị (ở mức thu phóng 100%) cũng phụ thuộc vào cài đặt dpi của hình ảnh của bạn.

Hãy thử một trong những điều sau:

• tiêu chuẩn trường học cũ cho đồ họa web: 72 dpi
• màn hình máy tính để bàn thông thường: 96 dpi

Thêm vào câu trả lời của Scott, lý do kích thước phông chữ rất khác nhau trong Photoshop hoặc web có thể là do Photoshop sử dụng các điểm, trong khi web sử dụng pixel (hoặc ems, tôi rất muốn giới thiệu px).

Tính toán cho mối quan hệ sẽ là một cái gì đó như:

Kích thước phông chữ tính bằng pixel / cỡ chữ tính theo điểm = trình duyệt dpi (96) / Độ phân giải hình ảnh Photoshop (ppi hoặc điểm trên inch)

Vì vậy, nếu bạn có một hình ảnh Photoshop với phông chữ 13pt ở mức 72 ppi, kích thước phông chữ tương ứng tính bằng pixel để hiển thị trong trình duyệt web là

Cỡ chữ bằng pixel = (13/72) * 96 = 17.3 px

Bạn có thể thấy một bảng chuyển đổi ở đây .

Cả Photoshop & Browser đều khác nhau nên có thể có kích thước văn bản. Tôi cũng gặp vấn đề này vì vậy tôi tìm nó và tìm http://pxtoem.com Bạn có thể thấy nó có kích thước phông chữ hoạt động như thế nào và cỡ chữ nào bạn có thể sử dụng cho văn bản của mình.

Bạn phải nhớ rằng PhotoShop được xây dựng khác với trình duyệt, vì vậy 12 px trong PhotoShop có thể là 14 px trên một trang web trực tuyến. Ngay cả các trình duyệt đôi khi hiển thị những thứ kỳ quặc hoặc di chuyển một phần tử 2 px sang bên phải.

Khi trình duyệt của bạn hiển thị một trang web, nó sử dụng px thay vì pt. Không có gì sẽ giống nhau trên tất cả mọi thứ, chỉ cần phấn đấu để nó trông tốt.