"Em" là gì nếu kích thước phông chữ của tài liệu được chỉ định bằng ems?

Question

Trong CSS, em là đơn vị tương đối dựa trên kích thước phông chữ của tài liệu. Vì vậy, chính xác thì em là gì sau đó, nếu kích thước phông chữ của tài liệu thì chính nó là được đo bằng ems? Giả sử chúng ta nói:

<style type = "text/css"> 
body 
{ 
    font-size: 1em; 
} 
</style> 

Vì vậy, em hiện được xác định đệ quy. Vậy trình duyệt này được xử lý như thế nào?

Các W3C docs nói:

Đơn vị 'em' là tương đương với giá trị tính toán của 'font-size' tài sản của các yếu tố trên mà nó được sử dụng. Ngoại lệ là khi 'em' xuất hiện trong giá trị của thuộc tính 'kích thước phông chữ', trong đó trường hợp nó đề cập đến kích thước phông chữ của phần tử gốc. Nó có thể được sử dụng cho phép đo dọc hoặc ngang. (Đơn vị này cũng đôi khi được gọi là quad-width trong các văn bản chính tả.)

Nhưng nếu phần tử là document.body, vì vậy không có yếu tố phụ huynh?

Answer 1

body không phải là phần tử gốc của tài liệu - đó là quan niệm sai lầm rất phổ biến. Phần tử cha của body là html, có kích thước phông chữ mặc định phù hợp với cài đặt kích thước phông chữ mặc định của trình duyệt (thường là 16px).

này áp dụng ngay cả khi bạn đặt một giá trị font-size trong ems trên cảbody và html. Vì vậy, nếu bạn đã làm điều này:

html, body { font-size: 2em; } 

Sau đó, giả định một kích thước phông chữ mặc định của 16px như thiết lập bởi người sử dụng, html sẽ có một kích thước phông chữ của 32px (gấp đôi kích thước phông chữ mặc định) và body sẽ có một cỡ chữ của 64px (hai lần của cha mẹ, html).

---

_{Để được chính xác, cỡ chữ mặc định html yếu tố là the initial value, medium, mà theo spec tương ứng với kích thước phông chữ mặc định ưu tiên như quy định bởi người sử dụng.}

Answer 2

Nó sẽ tương ứng với kích thước phông chữ mặc định của trình duyệt, S W ĐƯỢC chỉ định ở kích thước thực, ví dụ: '10pt'.

Answer 3

Sẽ mất giá trị mặc định của trình duyệt là 16px nếu không có yếu tố gốc nào được xác định.

Cũng thấy điều này: http://pxtoem.com/