Sử dụng Thuộc tính chiều cao dòng CSS để cải thiện khả năng đọc
Trong bài viết này, bạn sẽ tìm hiểu về thuộc line-height CSS và cách bạn có thể sử dụng nó để tạo văn bản dễ đọc, trực quan.
Bạn có thể đã thấy chiều cao dòng được sử dụng trước đây:
p { font-size: 16px; line-height: 1.2; } Nhưng nó hoạt động như thế nào và nó có role gì trong CSS?
Gốc chữ trong CSS
Nhiều ý tưởng trong CSS được rút ra từ kỷ luật về kiểu chữ . Một ví dụ là thuộc tính CSS line-height đặt khoảng cách giữa hai đường cơ sở của văn bản được bao bọc.
“Đường cơ sở” là đường tưởng tượng mà văn bản nằm trên đó.
Ví dụ: nếu ta có đoạn văn bản ngắn này bên trong <div> :
<div> The alligator went for a swim in the deep lagoon. </div> Nếu bạn kéo cửa sổ trình duyệt của bạn để văn bản được bao bọc sang dòng tiếp theo, bạn sẽ có hai đường cơ sở và chiều cao dòng (được biểu thị bằng các mũi tên màu vàng):
Giá trị lớn hơn cho thuộc line-height CSS sẽ mở rộng khoảng cách này và các giá trị nhỏ hơn sẽ thu hẹp nó.
Chiều cao dòng & khả năng đọc văn bản
Thuộc tính line-height đóng role trung tâm trong việc giúp user có thể đọc được văn bản. Khi bạn giảm kích thước line-height nó sẽ cảm thấy đông đúc. Đọc văn bản như thế này trong thời gian dài sẽ khiến user cảm thấy mệt mỏi:
Nếu nó quá lớn, user sẽ khó cảm thấy bị cuốn hút vào những gì họ đang đọc:
Nhưng khi bạn tìm được line-height , văn bản của bạn sẽ cảm thấy rộng rãi và hài hòa 💮🌺🌸
Việc tìm line-height sẽ khác nhau tùy theo nhu cầu của bạn, nhưng nó cũng phụ thuộc vào họ phông chữ mà bạn đang sử dụng. Điều này là do mỗi phông chữ có tính cách riêng và sẽ “đọc” khác nhau trong một khối văn bản đáng kể.
Ví dụ: Helvetica và Times New Roman sẽ yêu cầu khoảng cách line-height khác nhau ngay cả khi cả hai đều có cùng font-size .
Cú pháp cho chiều cao dòng
Bạn có thể cung cấp chiều cao dòng với tất cả các loại giá trị! Nó cũng khá khác biệt so với các thuộc tính CSS khác vì nó có thể chấp nhận các giá trị px và % điển hình, nhưng nó cũng có giá trị “không có đơn vị” duy nhất:
/* Use browser default. Typically "1.2" for all the major browsers */ line-height: normal; /* Unitless (only line-height can do this!) */ line-height: 1.2; /* <length> values like px, rem, em, pt */ line-height: 3em; /* <percentage> values */ line-height: 120%; Chiều cao dòng được biểu thị bằng mũi tên màu vàng.
Cách trình duyệt tính toán chiều cao dòng
Nếu bạn sử dụng phần trăm hoặc giá trị “không có đơn vị”, kích thước phông chữ sẽ được tính vào line-height kết quả. Ví dụ: cả hai đoạn mã dưới đây sẽ được trình duyệt tính thành 19.2px :
.myText { font-size: 16px; line-height: 1.2 /* (19.2px = 16 x 1.2) */ } .myText { font-size: 16px; line-height: 120%; /* (19.2px = 16 x 1.2) */ } Tuy nhiên, nếu bạn sử dụng các giá trị “length” như px|em|rem|pt , thì font-size sẽ không được sử dụng để tính line-height :
.myText { font-size: 16px; line-height: 20px; /* Always 20px! */ } Mặc dù cả giá trị phần trăm và giá trị "không đơn vị" dường như giống hệt nhau, nhưng có sự khác biệt nhỏ. Các phương pháp hay nhất đề xuất sử dụng các giá trị "không có đơn vị" khi nào có thể
Kết luận
Nói chung, line-height tốt nằm trong repository ảng từ 1,5 đến 1,7 đối với hầu hết các phông chữ. Ví dụ: Alligator.io sử dụng chiều cao dòng là 1,6. Đó là nghệ thuật hơn là khoa học và nhiều lần bạn sẽ thấy mình đang mở “Công cụ dành cho nhà phát triển” của trình duyệt để di chuyển line-height cho đến khi cảm thấy “vừa phải” ✨👌
Để tìm hiểu thêm, hãy truy cập MDN để biết tài liệu về độ cao dòng .
Các tin liên quan
Cách sử dụng CSS: root Pseudo-Class Selector2020-01-15
Khi nào bạn nên sử dụng quy tắc CSS! Important?
2020-01-14
Thủ thuật sử dụng CSS translateZ () và phối cảnh ()
2019-12-13
Cách hiển thị CSS trên server ứng dụng React
2019-12-12
Cách tạo Thư viện ảnh cuộn vô hạn với React và CSS Grid
2019-12-12
Cách tạo node tải xuống với các tương tác nhỏ với CSS, anime.js và segment.js
2019-12-12
Cách giải quyết tắc nghẽn CSS quy mô lớn với ITCSS và BEM
2019-12-12
Đặt, giãn cách và mật độ trong CSS Grid
2019-12-12
Hiểu tính cụ thể trong CSS
2019-09-03
CSS sẽ thay đổi Thuộc tính: Khi nào và Không sử dụng Nó
2019-08-26
