Chiều cao thẻ css p

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

4 và

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

5 là các thuộc tính CSS đơn giản. Đơn giản đến mức hầu hết chúng ta đều bị thuyết phục để hiểu đầy đủ cách chúng hoạt động và cách sử dụng chúng. Nhưng nó không phải là. Chúng thực sự phức tạp, có thể là khó nhất, vì chúng có vai trò chính trong việc tạo ra một trong những tính năng ít được biết đến của CSS. bối cảnh định dạng nội tuyến

Ví dụ: bạn có thể đặt

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

6 làm độ dài hoặc giá trị không có đơn vị nhưng giá trị mặc định là

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

7. OK, nhưng bình thường là gì? . 2, ngay cả. Chúng tôi biết rằng

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

6 không có đơn vị là

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

9 họ hàng, nhưng vấn đề là

    Good design will be better.
    Ba
    Ba
    Ba
    We get to make a consequence.

0 hoạt động khác nhau giữa các họ phông chữ, vậy ____0_______6 luôn giống nhau hay khác nhau? . 2?

Tìm hiểu sâu về một cơ chế CSS không hề đơn giản…

Hãy nói về p { font-size: 100px } .a { font-family: Helvetica } .b { font-family: Gruppo } .c { font-family: Catamaran }9 trước

Hãy xem mã HTML đơn giản này, một thẻ

    Good design will be better.
    Ba
    Ba
    Ba
    We get to make a consequence.

5 chứa 3

    Good design will be better.
    Ba
    Ba
    Ba
    We get to make a consequence.

6, mỗi thẻ có một

    Good design will be better.
    Ba
    Ba
    Ba
    We get to make a consequence.

7 khác nhau

    Ba
    Ba
    Ba

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

Sử dụng cùng một

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

9 với các họ phông chữ khác nhau sẽ tạo ra các phần tử có độ cao khác nhau

Các họ phông chữ khác nhau, cùng cỡ chữ, cho các độ cao khác nhau

Ngay cả khi chúng tôi nhận thức được hành vi đó, tại sao

    Good design will be better.
    Ba
    Ba
    Ba
    We get to make a consequence.

0 không tạo các phần tử có chiều cao 100px? . Helvetica. Nhóm 115px. 97px và Catamaran. 164px

Các phần tử có cỡ chữ. 100px có chiều cao thay đổi từ 97px đến 164px

Mặc dù thoạt nghe có vẻ hơi kỳ lạ, nhưng nó hoàn toàn được mong đợi. Lý do nằm bên trong chính phông chữ. Đây là cách nó làm việc

• một phông chữ xác định em-square của nó (hoặc UPM, đơn vị mỗi em), một loại vùng chứa trong đó mỗi ký tự sẽ được vẽ. Hình vuông này sử dụng các đơn vị tương đối và thường được đặt ở 1000 đơn vị. Nhưng nó cũng có thể là 1024, 2048 hoặc bất kỳ thứ gì khác
• dựa trên các đơn vị tương đối của nó, số liệu của phông chữ được đặt (tăng dần, giảm dần, chiều cao chữ hoa, chiều cao x, v.v. ). Lưu ý rằng một số giá trị có thể tràn ra bên ngoài em-square
• trong trình duyệt, các đơn vị tương đối được chia tỷ lệ để phù hợp với kích thước phông chữ mong muốn

Hãy lấy phông chữ Catamaran và mở nó trong FontForge để lấy số liệu

• bình phương em là 1000
• tăng dần là 1100 và giảm dần là 540. Sau khi chạy một số thử nghiệm, có vẻ như các trình duyệt sử dụng các giá trị HHead Ascent/Descent trên Mac OS và Win Ascent/Descent trên Windows (các giá trị này có thể khác nhau. ). Chúng tôi cũng lưu ý rằng Chiều cao vốn là 680 và chiều cao X là 485

Giá trị chỉ số phông chữ bằng FontForge

Điều đó có nghĩa là phông chữ Catamaran sử dụng 1100 + 540 đơn vị trong một ô vuông 1000 đơn vị, cho chiều cao là 164px khi đặt

    Good design will be better.
    Ba
    Ba
    Ba
    We get to make a consequence.

0. Chiều cao được tính toán này xác định vùng nội dung của một phần tử và tôi sẽ đề cập đến thuật ngữ này cho phần còn lại của bài viết. Bạn có thể coi khu vực nội dung là khu vực áp dụng thuộc tính

    Ba
    Ba

1

Chúng ta cũng có thể dự đoán rằng chữ hoa cao 68px (680 đơn vị) và chữ thường (x-height) cao 49px (485 đơn vị). Kết quả là,

    Ba
    Ba

2 = 49px và

    Ba
    Ba

3 = 100px, không phải 164px (rất may,

    Ba
    Ba

4 dựa trên

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

9, không phải chiều cao được tính toán)

phông chữ catamaran. UPM —Units Per Em— và pixel tương đương sử dụng cỡ chữ. 100px

Trước khi đi sâu hơn, một ghi chú ngắn về những gì nó liên quan. Khi một phần tử

    Good design will be better.
    Ba
    Ba
    Ba
    We get to make a consequence.

5 được hiển thị trên màn hình, nó có thể bao gồm nhiều dòng, theo chiều rộng của nó. Mỗi dòng được tạo thành từ một hoặc nhiều phần tử nội tuyến (thẻ HTML hoặc phần tử nội tuyến ẩn danh cho nội dung văn bản) và được gọi là hộp dòng. Chiều cao của line-box dựa trên chiều cao của con nó. Do đó, trình duyệt tính toán chiều cao cho từng phần tử nội tuyến và do đó, chiều cao của hộp dòng (từ điểm cao nhất của phần tử con đến điểm thấp nhất của phần tử con). Kết quả là, một hộp dòng luôn đủ cao để chứa tất cả các phần tử con của nó (theo mặc định)

Mỗi phần tử HTML thực sự là một chồng hộp dòng. Nếu bạn biết chiều cao của mỗi hộp dòng, bạn sẽ biết chiều cao của một phần tử

Nếu chúng tôi cập nhật mã HTML trước đó như thế này

    Good design will be better.
    Ba
    Ba
    Ba
    We get to make a consequence.

Nó sẽ tạo ra 3 hộp dòng

• cái đầu tiên và cái cuối cùng chứa một thành phần nội tuyến ẩn danh (nội dung văn bản)
• cái thứ hai chứa hai phần tử nội tuyến ẩn danh và 3

  
      Good design will be better.
      Ba
      Ba
      Ba
      We get to make a consequence.
  

  6

Một

    Good design will be better.
    Ba
    Ba
    Ba
    We get to make a consequence.

5 (đường viền màu đen) được tạo bởi các hộp dòng (đường viền màu trắng) có chứa các phần tử nội tuyến (đường viền liền nét) và các phần tử nội tuyến ẩn danh (đường viền nét đứt)

Chúng ta thấy rõ ràng rằng hộp dòng thứ hai cao hơn các hộp khác, do vùng nội dung được tính toán của các phần tử con của nó và cụ thể hơn là hộp sử dụng phông chữ Catamaran

Phần khó khăn trong việc tạo hộp dòng là chúng ta không thể thực sự nhìn thấy hoặc kiểm soát nó bằng CSS. Ngay cả việc áp dụng nền cho

    Ba
    Ba

9 cũng không cho chúng ta bất kỳ manh mối trực quan nào về chiều cao của hộp dòng đầu tiên

p { font-size: 100px } .a { font-family: Helvetica } .b { font-family: Gruppo } .c { font-family: Catamaran }6. đến các vấn đề và hơn thế nữa

Cho đến bây giờ, tôi đã giới thiệu hai khái niệm. khu vực nội dung và hộp dòng. Nếu bạn đọc kỹ thì tôi đã nói rằng chiều cao của hộp dòng được tính theo chiều cao của phần con của nó, tôi không nói chiều cao của khu vực nội dung con của nó. Và điều đó tạo nên sự khác biệt lớn

Mặc dù nghe có vẻ lạ nhưng một phần tử nội tuyến có hai chiều cao khác nhau. chiều cao của vùng nội dung và chiều cao của vùng ảo (Tôi đã phát minh ra thuật ngữ vùng ảo vì chiều cao là vô hình đối với chúng tôi, nhưng bạn sẽ không tìm thấy bất kỳ sự xuất hiện nào trong thông số kỹ thuật)

• chiều cao của khu vực nội dung được xác định bởi chỉ số phông chữ (như đã thấy trước đây)
• chiều cao của vùng ảo là

  p  { font-size: 100px }
  .a { font-family: Helvetica }
  .b { font-family: Gruppo    }
  .c { font-family: Catamaran }

  6 và đó là chiều cao được sử dụng để tính chiều cao của hộp dòng

Các phần tử nội tuyến có hai chiều cao khác nhau

Điều đó đang được nói, nó phá vỡ niềm tin phổ biến rằng

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

6 là khoảng cách giữa các đường cơ sở. Trong CSS, nó không phải là

Trong CSS, line-height không phải là khoảng cách giữa các đường cơ sở

Sự khác biệt về chiều cao được tính toán giữa khu vực ảo và khu vực nội dung được gọi là. Một nửa phần dẫn này được thêm vào phía trên khu vực nội dung, nửa còn lại được 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 giá trị được tính toán,

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

6 (khu vực ảo) có thể bằng, cao hơn hoặc nhỏ hơn khu vực nội dung. Trong trường hợp vùng ảo nhỏ hơn, đường dẫn đầu là âm và hộp dòng nhỏ hơn trực quan so với phần tử con của nó

Ngoài ra còn có các loại yếu tố nội tuyến khác

• đã thay thế các phần tử nội tuyến (

  p {
      font-family: Catamaran;
      font-size: 100px;
      line-height: 200px;
  }

  4,

  p {
      font-family: Catamaran;
      font-size: 100px;
      line-height: 200px;
  }

  5,

  p {
      font-family: Catamaran;
      font-size: 100px;
      line-height: 200px;
  }

  6, v.v. )

• p {
      font-family: Catamaran;
      font-size: 100px;
      line-height: 200px;
  }

  7 và tất cả các phần tử

  p {
      font-family: Catamaran;
      font-size: 100px;
      line-height: 200px;
  }

  8
• các phần tử nội tuyến tham gia vào ngữ cảnh định dạng cụ thể (ví dụ:. trong một phần tử flexbox, tất cả các mục flex được khối hóa)

Đối với các phần tử nội tuyến cụ thể này, chiều cao được tính dựa trên các thuộc tính

p {
    font-family: Catamaran;
    font-size: 100px;
    line-height: 200px;
}

9,

span:last-child {
    font-size: 50px;
}

0 và

span:last-child {
    font-size: 50px;
}

1 của chúng. Nếu

p {
    font-family: Catamaran;
    font-size: 100px;
    line-height: 200px;
}

9 là

span:last-child {
    font-size: 50px;
}

3, thì

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

6 được sử dụng và vùng nội dung hoàn toàn bằng với

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

6

Các phần tử được thay thế nội tuyến, khối nội tuyến/nội tuyến-* và các phần tử nội tuyến được khối hóa có vùng nội dung bằng chiều cao hoặc chiều cao dòng của chúng

Dù sao đi nữa, vấn đề mà chúng ta vẫn đang gặp phải là giá trị của

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

6 của

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

7 là bao nhiêu?

Vì vậy, hãy quay lại FontForge. Em-square của Catamaran là 1000, nhưng chúng ta đang thấy nhiều giá trị tăng dần/giảm dần

• tướng Đi lên/Xuống. tăng dần là 770 và giảm dần là 230. Dùng để vẽ nhân vật. (bảng “OS/2”)
• chỉ số Đi lên/Đi xuống. tăng dần là 1100 và giảm dần là 540. Được sử dụng cho chiều cao của khu vực nội dung. (bảng “hhea” và bảng “OS/2”)
• Khoảng cách dòng số liệu. Được sử dụng cho

  span:last-child {
      font-size: 50px;
  }

  8, bằng cách thêm giá trị này vào chỉ số Tăng/Giảm. (bảng “à”)

Trong trường hợp của chúng tôi, phông chữ Catamaran xác định khoảng cách dòng 0 đơn vị, do đó,

span:last-child {
    font-size: 50px;
}

8 sẽ bằng với vùng nội dung, là 1640 đơn vị hoặc 1. 64

Để so sánh, phông chữ Arial mô tả một ô vuông gồm 2048 đơn vị, phần tăng dần là 1854, phần giảm dần là 434 và khoảng cách dòng là 67. Điều đó có nghĩa là

    Good design will be better.
    Ba
    Ba
    Ba
    We get to make a consequence.

0 cung cấp vùng nội dung là 112px (1117 đơn vị) và

span:last-child {
    font-size: 50px;
}

8 là 115px (1150 đơn vị hoặc 1. 15). Tất cả các số liệu này đều dành riêng cho phông chữ và do nhà thiết kế phông chữ đặt

Rõ ràng là cài đặt

    Ba

2 là một cách làm không tốt. Tôi nhắc bạn rằng các giá trị không có đơn vị là ____0_______9 tương đối, không tương đối với vùng nội dung và xử lý vùng ảo nhỏ hơn vùng nội dung là nguồn gốc của nhiều vấn đề của chúng tôi

Sử dụng chiều cao dòng. 1 có thể tạo line-box nhỏ hơn content-area

Nhưng không chỉ

    Ba

2. Đối với giá trị của nó, trên 1117 phông chữ được cài đặt trên máy tính của tôi (vâng, tôi đã cài đặt tất cả các phông chữ từ Google Web Fonts), 1059 phông chữ, khoảng 95%, có _______ được tính toán lớn hơn 1. Tính toán của họ

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

6 đi từ 0. 618 đến 3. 378. Bạn đã đọc nó tốt, 3. 378

Chi tiết nhỏ về tính toán hộp dòng

• đối với các phần tử nội tuyến,

  
      Ba
  

  7 và

  span:last-child {
      font-size: 50px;
  }

  1 tăng diện tích nền, nhưng không tăng chiều cao của khu vực nội dung (cũng như chiều cao của hộp dòng). Do đó, khu vực nội dung không phải lúc nào cũng là những gì bạn nhìn thấy trên màn hình.

  
      Ba
  

  9 và

  p {
      line-height: 200px;
  }
  span {
      font-family: Catamaran;
      font-size: 100px;
  }

  0 không có hiệu lực
• cho các phần tử nội tuyến được thay thế,

  p {
      font-family: Catamaran;
      font-size: 100px;
      line-height: 200px;
  }

  7 và các phần tử nội tuyến được khối hóa.

  
      Ba
  

  7,

  span:last-child {
      font-size: 50px;
  }

  0 và

  span:last-child {
      font-size: 50px;
  }

  1 tăng

  p {
      font-family: Catamaran;
      font-size: 100px;
      line-height: 200px;
  }

  9, vì vậy chiều cao của khu vực nội dung và hộp dòng

p { font-size: 100px } .a { font-family: Helvetica } .b { font-family: Gruppo } .c { font-family: Catamaran }5. một tài sản để cai trị tất cả

Tôi chưa đề cập đến thuộc tính

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

5, mặc dù nó là yếu tố cần thiết để tính chiều cao của hộp dòng. Chúng tôi thậm chí có thể nói rằng

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

5 có thể có vai trò hàng đầu trong bối cảnh định dạng nội tuyến

Giá trị mặc định là

p {
    line-height: 200px;
}
span {
    font-family: Catamaran;
    font-size: 100px;
}

9. Bạn có nhắc số liệu phông chữ tăng dần và giảm dần không? . Vì tỷ lệ giữa phần tử tăng dần và phần tử giảm dần hiếm khi là 50/50 nên nó có thể tạo ra kết quả không mong muốn, chẳng hạn như với các phần tử anh chị em

Bắt đầu với mã đó

    Ba
    Ba

p {
    font-family: Catamaran;
    font-size: 100px;
    line-height: 200px;
}

Thẻ

    Good design will be better.
    Ba
    Ba
    Ba
    We get to make a consequence.

5 với 2 anh chị em ruột

    Good design will be better.
    Ba
    Ba
    Ba
    We get to make a consequence.

6 kế thừa

    Good design will be better.
    Ba
    Ba
    Ba
    We get to make a consequence.

7,

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

9 và cố định

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

6. Các đường cơ sở sẽ khớp và chiều cao của hộp dòng bằng với

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

6 của chúng

Cùng giá trị phông chữ, cùng đường cơ sở, mọi thứ có vẻ ổn

Điều gì xảy ra nếu phần tử thứ hai có

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

9 nhỏ hơn?

span:last-child {
    font-size: 50px;
}

Nghe có vẻ kỳ lạ, căn chỉnh đường cơ sở mặc định có thể dẫn đến kết quả cao hơn (. ) hộp dòng, như trong hình bên dưới. Tôi xin nhắc bạn rằng chiều cao của hộp dòng được tính từ điểm cao nhất của con nó đến điểm thấp nhất của con nó

Phần tử con nhỏ hơn có thể dẫn đến chiều cao của hộp dòng cao hơn

Đó có thể là một đối số ủng hộ việc sử dụng các giá trị không có đơn vị của

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

6, nhưng đôi khi bạn cần các giá trị cố định để. Thành thật mà nói, bất kể bạn chọn gì, bạn sẽ luôn gặp rắc rối với việc sắp xếp nội tuyến

Nhìn vào đây một ví dụ khác. Một thẻ

    Good design will be better.
    Ba
    Ba
    Ba
    We get to make a consequence.

5 với

p {
    /* font metrics */
    --font: Catamaran;
    --fm-capitalHeight: 0.68;
    --fm-descender: 0.54;
    --fm-ascender: 1.1;
    --fm-linegap: 0;

    /* desired font-size for capital height */
    --capital-height: 100;

    /* apply font-family */
    font-family: var(--font);

    /* compute font-size to get capital height equal desired font-size */
    --computedFontSize: (var(--capital-height) / var(--fm-capitalHeight));
    font-size: calc(var(--computedFontSize) * 1px);
}

9, chứa một thẻ

    Good design will be better.
    Ba
    Ba
    Ba
    We get to make a consequence.

6 kế thừa

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

6

    Ba

p {
    line-height: 200px;
}
span {
    font-family: Catamaran;
    font-size: 100px;
}

Line-box cao bao nhiêu? . Vấn đề ở đây là

    Good design will be better.
    Ba
    Ba
    Ba
    We get to make a consequence.

5 có

    Good design will be better.
    Ba
    Ba
    Ba
    We get to make a consequence.

7 riêng, khác (mặc định là

p {
    …
    --lineheightNormal: (var(--fm-ascender) + var(--fm-descender) + var(--fm-linegap));
    --contentArea: (var(--lineheightNormal) * var(--computedFontSize));
}

4). Đường cơ sở giữa thẻ

    Good design will be better.
    Ba
    Ba
    Ba
    We get to make a consequence.

5 và thẻ

    Good design will be better.
    Ba
    Ba
    Ba
    We get to make a consequence.

6 có thể khác nhau, do đó chiều cao của hộp dòng cao hơn dự kiến. Điều này xảy ra bởi vì các trình duyệt thực hiện tính toán của chúng như thể mỗi hộp dòng bắt đầu bằng một ký tự có độ rộng bằng 0, thông số kỹ thuật đó được gọi là thanh chống

Một nhân vật vô hình, nhưng một tác động có thể nhìn thấy

Để tiếp tục, chúng tôi đang đối mặt với cùng một vấn đề trước đó đối với các phần tử anh chị em

Mỗi đứa trẻ được căn chỉnh như thể hộp dòng của nó bắt đầu bằng một ký tự có độ rộng bằng không vô hình

Căn chỉnh đường cơ sở bị sai lệch, nhưng còn

p {
    …
    --lineheightNormal: (var(--fm-ascender) + var(--fm-descender) + var(--fm-linegap));
    --contentArea: (var(--lineheightNormal) * var(--computedFontSize));
}

7 để giải cứu thì sao? . Tỷ lệ đường cơ sở khác nhau, cũng như tỷ lệ chiều cao x, do đó, căn chỉnh

p {
    …
    --lineheightNormal: (var(--fm-ascender) + var(--fm-descender) + var(--fm-linegap));
    --contentArea: (var(--lineheightNormal) * var(--computedFontSize));
}

8 cũng không đáng tin cậy. Tồi tệ nhất, trong hầu hết các trường hợp,

p {
    …
    --lineheightNormal: (var(--fm-ascender) + var(--fm-descender) + var(--fm-linegap));
    --contentArea: (var(--lineheightNormal) * var(--computedFontSize));
}

8 không bao giờ thực sự “ở giữa”. Có quá nhiều yếu tố liên quan và không thể đặt qua CSS (chiều cao x, tỷ lệ tăng dần/giảm dần, v.v. )

Là một lưu ý phụ, có 4 giá trị khác, có thể hữu ích trong một số trường hợp

• p  { font-size: 100px }
  .a { font-family: Helvetica }
  .b { font-family: Gruppo    }
  .c { font-family: Catamaran }

  01 /

  p  { font-size: 100px }
  .a { font-family: Helvetica }
  .b { font-family: Gruppo    }
  .c { font-family: Catamaran }

  02 thẳng hàng với đầu hoặc cuối hộp dòng

• p  { font-size: 100px }
  .a { font-family: Helvetica }
  .b { font-family: Gruppo    }
  .c { font-family: Catamaran }

  03 /

  p  { font-size: 100px }
  .a { font-family: Helvetica }
  .b { font-family: Gruppo    }
  .c { font-family: Catamaran }

  04 căn thẳng hàng với đầu hoặc cuối khu vực nội dung

Căn dọc. trên cùng, dưới cùng, văn bản trên cùng và văn bản dưới cùng

Mặc dù vậy, hãy cẩn thận, trong mọi trường hợp, nó sẽ căn chỉnh vùng ảo, vì vậy chiều cao vô hình. Nhìn vào ví dụ đơn giản này bằng cách sử dụng

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

01.

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

6 vô hình có thể tạo ra kết quả kỳ lạ, nhưng không đáng ngạc nhiên

vertical-align có thể tạo ra kết quả kỳ lạ lúc đầu, nhưng được mong đợi khi trực quan hóa line-height

Cuối cùng,

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

5 cũng chấp nhận các giá trị số làm tăng hoặc giảm hộp liên quan đến đường cơ sở. Tùy chọn cuối cùng đó có thể có ích

CSS thật tuyệt vời

Chúng ta đã nói về cách

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

6 và

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

5 phối hợp với nhau, nhưng bây giờ câu hỏi đặt ra là. số liệu phông chữ có thể kiểm soát được bằng CSS không? . KHÔNG. Ngay cả khi tôi thực sự hy vọng như vậy. Dù sao, tôi nghĩ chúng ta phải chơi một chút. Số liệu về phông chữ là không đổi, vì vậy chúng tôi có thể làm điều gì đó

Ví dụ, nếu chúng ta muốn một văn bản sử dụng phông chữ Catamaran, trong đó chiều cao chữ hoa chính xác là 100px thì sao? . chúng ta hãy làm một số phép toán

Trước tiên, chúng tôi đặt tất cả các chỉ số phông chữ làm thuộc tính tùy chỉnh CSS , sau đó tính toán

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

9 để có chiều cao viết hoa là 100px

p {
    /* font metrics */
    --font: Catamaran;
    --fm-capitalHeight: 0.68;
    --fm-descender: 0.54;
    --fm-ascender: 1.1;
    --fm-linegap: 0;

    /* desired font-size for capital height */
    --capital-height: 100;

    /* apply font-family */
    font-family: var(--font);

    /* compute font-size to get capital height equal desired font-size */
    --computedFontSize: (var(--capital-height) / var(--fm-capitalHeight));
    font-size: calc(var(--computedFontSize) * 1px);
}

Chiều cao chữ hoa hiện cao 100px

Khá đơn giản, phải không?

Đầu tiên, tính toán

span:last-child {
    font-size: 50px;
}

8 và chiều cao của khu vực nội dung

p {
    …
    --lineheightNormal: (var(--fm-ascender) + var(--fm-descender) + var(--fm-linegap));
    --contentArea: (var(--lineheightNormal) * var(--computedFontSize));
}

Sau đó, chúng ta cần

• khoảng cách từ đáy chữ in hoa đến mép dưới
• khoảng cách từ đầu chữ in hoa đến mép trên

như vậy

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

0

Bây giờ chúng ta có thể tính toán

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

5, đó là sự khác biệt giữa khoảng cách nhân với

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

9 được tính toán. (chúng ta phải áp dụng giá trị này cho một phần tử con nội tuyến)

Chiều cao của thẻ P là bao nhiêu?

chiều cao dòng 1 là gì. 5 bằng pixel?

Làm cách nào để đặt chiều cao văn bản trong CSS?

Làm cách nào để tính chiều cao trong CSS?