EM cho chiều cao dòng

Question

Tôi muốn chuyển đổi trang web mới của mình từ pixel thành ems. Câu hỏi của tôi là, tôi cũng nên áp dụng ems cho tài sản văn bản chiều cao dòng của tôi?

Answer 1

Giả sử rằng "chuyển đổi thành ems" có nghĩa là sử dụng đơn vị em cho font-size, thì bạn nên đặt line-height theo cách cũng phù hợp với kích thước phông chữ. Hai thuộc tính có liên quan chặt chẽ và nếu bạn đặt một trong số các thuộc tính đó ở em và cái kia (ví dụ) trong px hoặc pt, thì trang sẽ bị hỏng nếu kích thước phông chữ bị thay đổi. Vì vậy, nó sẽ làm việc chống lại ý tưởng rất "sử dụng ems" để sử dụng các đơn vị cơ bản khác nhau cho các thuộc tính cơ bản kết nối. Ví dụ: nếu bạn đặt font-size: 1.5em và line-height: 18px thì mọi thứ sẽ tùy thuộc vào kích thước phông chữ của bố mẹ của phần tử và có thể rất sai nếu kích thước đó nhỏ hơn nhiều hoặc lớn hơn nhiều so với mong đợi.

Cho dù bạn sử dụng đơn vị em hoặc số thuần túy là một vấn đề khác. Chỉ sử dụng một số, như trong line-height: 1.2, chủ yếu tương đương với việc sử dụng đơn vị em, như trong line-height: 1.2em. Nhưng có sự khác biệt là khi line-height được kế thừa, đó là số thuần được thừa hưởng, không phải là giá trị được tính. Ví dụ, nếu phần tử bên trong có gấp đôi kích thước phông chữ của phần tử gốc, thì giá trị thừa kế 1.2 có nghĩa là sử dụng 1,2 lần kích thước phông chữ của riêng nó, điều này là OK. Nhưng nếu cha mẹ có line-height: 1.2em thì con sẽ kế thừa giá trị gấp 1,2 lần kích thước phông chữ của cha mẹ - nhỏ hơn nhiều so với kích thước phông chữ của chính nó.

để biết thêm ví dụ giải thích cuối thấy line-height @ Mozilla Developer Network

Answer 2

bạn có thể thử line-height:1.3 !important;

Answer 3

line-height thể được thiết lập trong px, em 's, mỗi đơn vị sẽ phù hợp.

line-height hoạt động tốt nhất và bằng chứng trong tương lai nếu bạn sử dụng hệ số/nhân, nghĩa là không có đơn vị, nhưng chỉ là số nhân kích thước phông chữ của bạn.

.foo { 
    font-size: 1.3em; /* based that 1em == 10px */ 
    line-height: 1.3; /* 16.9px line-height */ 
} 

Vì vậy, có, bạn có thể trả lời câu hỏi của bạn: không bạn không nên.

chỉ cần đi theo chiều cao dòng dựa trên yếu tố để trở thành bằng chứng trong tương lai.

Answer 4

Đó là khuyến cáo sử dụng số unitless cho line-height (để ngăn chặn vấn đề thừa kế). Sau đó, chiều cao dòng được tính sẽ là sản phẩm của giá trị không đơn nhân với kích thước phông chữ của phần tử.

Nó có thể là thuận tiện hơn để sử dụng phím tắt font CSS, như vậy (ví dụ lấy từ các tài liệu Mozilla CSS):

div { font: 10pt/1.2 Georgia,"Bitstream Charter",serif } 

Một ví dụ tốt về lý do tại sao giá trị unitless là một lợi thế được đưa ra ở đây: Prefer unitless numbers for line-height values .