Mã html chiều cao dòng
|
số. a value value (as 1, 1. 2, 2, 3. ) Chiều cao của dòng được xác định bằng số nhân với giá trị cỡ chữ .my-height {
font-size: 14px; /* cỡ chữ 14px */
line-height: 1.2; /* chiều cao dòng = 1.2 * 14 = 16.8px */
}
Giá trịMô tảDemonormalChiều cao dòng bình thường. Đây là mặc địnhDemo ❯sốMột số sẽ được nhân với cỡ chữ hiện tại để đặt chiều cao dòngDemo ❯chiều dàiMột chiều cao dòng cố định theo px, pt, cm, v.v. Bản trình diễn ❯%Chiều cao dòng theo phần trăm của kích thước phông chữ hiện tại Bản trình diễn ❯initialĐặt thuộc tính này thành giá trị mặc định của nó. Đọc về khởi tạo Kế thừa thuộc tính này từ phần tử cha của nó. Đọc về thừa kế Bài viết được dịch từ bài Deep Dive CSS. chỉ số phông chữ, chiều cao dòng và căn dọc của tác giả Vincent De Oliveira Ví dụ, Tìm hiểu sâu về một cơ chế không-đơn-giản của CSS Please say aboutVui lòng xem đoạn mã HTML đơn giản bên dưới, thẻ Sử dụng cùng một  Các họ phông chữ khác nhau, cùng cỡ chữ, sinh ra các chiều cao khác nhau Tuy chúng ta đoán trước được việc đó, nhưng tại sao Element section with font-size. 100px has height change from 97px to 164px Dù có vẻ hơi kỳ lạ, nhưng điều này hoàn toàn nằm trong dự đoán. Lý do nằm ở bản thân các phông chữ. Dưới đây là cách các chữ cái hoạt động
Vui lòng mở phông chữ Catamaran bằng FontForge để xem các số
The only number of font when view on FontForge Điều đó có nghĩa là phông chữ Catamaran sử dụng 1100 + 540 đơn vị trên 1000 đơn vị em-square, kết quả là 164px khi thiết lập giá trị Chúng ta có thể dự đoán rằng độ cao của chữ cái trong hoa là 68px (680 đơn vị) và chữ cái trong thường (x-height) là 49px (485 đơn vị). Kết quả là Phông chữ Catamaran. UPM - Units Per Em - và lượng pixel tương ứng khi sử dụng font-size. 100px Trước khi tìm hiểu kỹ hơn, hay xem những thứ trên có ý nghĩa gì. Khi một phần tử
Nếu chúng ta chỉnh sửa mã HTML ở trên thành thế này nó sẽ sinh ra 3 line-box
Một thẻ Chúng ta biết rằng line-box thứ 2 cao hơn các line-box khác, làm nội dung của các phần tử con của nó, và chính xác hơn là phần tử sử dụng phông chữ Catamaran Phần khó khăn trong việc tạo thành line-box là chúng ta không thực sự nhìn thấy hay kiểm soát được nó bằng CSS. Ngay cả việc áp dụng thuộc tính nền vào Tới giờ, tôi đã giới thiệu cho các bạn 2 khái niệm. khu vực nội dung và hộp dòng. Nếu bạn nhớ, tôi đã nói rằng chiều cao của một line-box được tính toán dựa trên chiều cao của các phần tử con của nó chứ không nói rằng nó được tính toán dựa trên chiều cao của khu vực nội dung của các phần tử con . Điều này tạo ra một sự khác biệt lớn Nghe có vẻ lạ, nhưng một phần tử nội tuyến có 2 chiều cao khác nhau. high content-area và high virtual-area (tôi đã tạo ra khái niệm virtual-area để đại diện cho chiều cao mà chúng ta nhìn thấy được, bạn sẽ không thấy trong đặc tả đâu)
Inline section inline có 2 chiều khác nhau Như vậy, điều này đã phá vỡ quan niệm thông thường rằng Trong CSS, line-height không phải là khoảng cách giữa các đường cơ sở Chiều cao khác nhau giữa khu vực ảo và khu vực nội dung được gọi là dẫn đầu. Một nửa dẫn đầu được cộng thêm vào phía trên của khu vực nội dung, nửa còn lại được cộng thêm vào phía dưới. Do khu vực nội dung đó luôn ở giữa khu vực ảo dựa trên các giá trị được tính toán, Còn có các loại phần tử nội tuyến khác
Với các phần tử nội tuyến riêng biệt này, chiều cao được tính dựa trên các thuộc tính Các phần tử nội tuyến thay thế, inline-block/inline-* và blocksified có vùng nội dung bằng với chiều cao, hoặc chiều cao dòng, của chúng Tuy nhiên, vấn đề của chúng tôi là giá trị của Do đó, hãy quay lại với FontForge. em-square của Catamaran là 1000, nhưng chúng ta thấy nhiều giá trị tăng/giảm khác nhau
Trong trường hợp của chúng tôi, phông chữ Catamaran định nghĩa khoảng cách dòng với giá trị là 0, nên Để so sánh, phông chữ Arial định nghĩa em-square với giá trị 2048 đơn vị, Ascender = 1854, Descender = 434 và line gap = 67. Nghĩa là với Làm vậy, hiển nhiên việc đặt Use line-height. 1 could create a line-box thấp hơn content-area Nhưng không chỉ có mỗi Một chút chi tiết nữa về công việc line-box tính toán
|
