Trình duyệt chuyển đổi kích thước phông chữ theo điểm thành pixel như thế nào?

Question

Nếu trình duyệt phải xử lý CSS sau đây: font-size: 12pt;, cách tính toán kích thước hiệu quả trên màn hình? Nó có thể biết dpi của màn hình (thông qua một số chức năng hệ điều hành) hoặc là nó chỉ là một xấp xỉ?

Nếu nó gần đúng - nó luôn luôn giống nhau (12pt = 16px) không?

Một số nhóm lập trình viên trình duyệt có viết về điều này không? (Tham chiếu sẽ tuyệt vời)

Answer 1

CSS cung cấp một số đơn vị khác nhau để biểu thị độ dài. Một số có lịch sử của họ trong typography, chẳng hạn như điểm (pt) và pica (pc), người khác được biết đến từ việc sử dụng hàng ngày, chẳng hạn như centimet (cm ) và inch (trong). Và cũng có một đơn vị "ma thuật" được phát minh cụ thể là cho CSS: px. Điều đó có nghĩa là các thuộc tính khác nhau cần các đơn vị khác nhau không?

Không, các đơn vị không có gì để làm với các thuộc tính, nhưng mọi thứ với phương tiện đầu ra: màn hình hoặc giấy.

Không có giới hạn về đơn vị nào có thể được sử dụng ở đâu. Nếu thuộc tính chấp nhận giá trị bằng px (lề: 5px), nó cũng chấp nhận giá trị tính bằng inch hoặc cm (lề: 1,2in; lề: 0,5cm) và ngược lại.

Mối quan hệ giữa các đơn vị tuyệt đối là như sau: 1 Trong = 2.54cm = 25.4mm = 72pt = 6pc

Cái gọi là đơn vị tuyệt đối (cm, mm, trong, pt và pc) có nghĩa là giống nhau trong CSS như mọi nơi khác, nhưng chỉ khi thiết bị đầu ra của bạn có độ phân giải đủ cao đủ. Trên máy in laser, 1cm phải chính xác 1 cm. Nhưng trên các thiết bị có độ phân giải thấp, chẳng hạn như màn hình máy tính, CSS không yêu cầu điều đó. Và quả thực, kết quả có xu hướng khác nhau từ một thiết bị này sang thiết bị khác và từ một triển khai CSS sang thiết bị khác. Tốt hơn là đặt trước các thiết bị này cho các thiết bị có độ phân giải cao và trong riêng cho đầu ra được in. Trên màn hình máy tính và thiết bị cầm tay , có thể bạn sẽ không nhận được những gì bạn mong đợi.

Cũng vì các đơn vị trong pt có thể được chỉ xấp xỉ trên màn hình (từ văn bản trên) nó không được khuyến khích để sử dụng trên phương tiện truyền thông màn hình.

Nguồn: EM, PX, PT, CM, IN…

Answer 2

Các báo cáo rõ ràng nhất được tìm thấy trong bài viết này: http://www.w3.org/Style/Examples/007/units.en.htm (Cảm ơn @Amit.)

Trước đây, CSS yêu cầu triển khai hiển thị đơn vị tuyệt đối ngay cả trên màn hình máy tính. Nhưng khi số lượng các triển khai không chính xác đông hơn và tình hình dường như không cải thiện, CSS đã từ bỏ yêu cầu đó vào năm 2011. Hiện tại, các đơn vị tuyệt đối phải hoạt động chính xác chỉ trên đầu ra được in và trên các thiết bị có độ phân giải cao.

Trong thực tế, CSS đòi hỏi 1px phải chính xác 1/lần thứ 96 của một inch trong tất cả sản lượng in. CSS xem xét rằng máy in, không giống như màn hình, không cần phải có kích thước khác nhau cho px để in các đường nét sắc nét. Trong phương tiện truyền thông in ấn, một px do đó không chỉ xuất hiện cùng một hình ảnh từ một thiết bị khác, nhưng thực sự nó có thể đo lường giống nhau (giống như cm, pt, mm, in và pc, như đã giải thích ở trên).

Và từ đây: w3.org/TR/css3-values/#absolute-lengths (Cảm ơn @Alexey)

Họ [các đơn vị chiều dài tuyệt đối] chủ yếu là hữu ích khi môi trường đầu ra đã được biết đến.

Đối với một thiết bị CSS, các kích thước là một trong hai neo (i) bằng cách liên hệ các đơn vị vật lý để đo thể chất của họ, hoặc (ii) bằng cách liên hệ các đơn vị pixel để pixel tham khảo. Đối với phương tiện in và các thiết bị có độ phân giải cao tương tự, đơn vị neo phải là một trong các đơn vị vật lý chuẩn (inch, centimet, vv). Đối với các thiết bị có độ phân giải thấp hơn và các thiết bị có khoảng cách xem khác thường, nên thay vào đó đơn vị neo là đơn vị pixel. Đối với các thiết bị như vậy, đơn vị pixel đề cập đến toàn bộ số pixel thiết bị tốt nhất xấp xỉ pixel tham chiếu.