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ếnVí 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
p { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo }
.c { font-family: Catamaran }
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 nhauNgay 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. 164pxMặ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
Đ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
1Chú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]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
6Good design will be better. Ba Ba Ba We get to make a consequence.
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ênp { 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
p { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo }
.c { font-family: Catamaran }
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à
6 và đó là chiều cao được sử dụng để tính chiều cao của hộp dòngp { font-size: 100px } .a { font-family: Helvetica } .b { font-family: Gruppo } .c { font-family: Catamaran }
Đ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à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 [
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; }
8p { font-family: Catamaran; font-size: 100px; line-height: 200px; }
- 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 }
6Dù 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
8, bằng cách thêm giá trị này vào chỉ số Tăng/Giảm. [bảng “à”]span:last-child { font-size: 50px; }
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ữ đặtRõ 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ôiNhư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. 378Chi tiết nhỏ về tính toán hộp dòng
- đối với các phần tử nội tuyến,
7 vàBa
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.span:last-child { font-size: 50px; }
9 vàBa
0 không có hiệu lựcp { line-height: 200px; } span { font-family: Catamaran; font-size: 100px; }
- cho các phần tử nội tuyến được thay thế,
7 và các phần tử nội tuyến được khối hóa.p { font-family: Catamaran; font-size: 100px; line-height: 200px; }
7,Ba
0 vàspan:last-child { font-size: 50px; }
1 tăngspan:last-child { font-size: 50px; }
9, vì vậy chiều cao của khu vực nội dung và hộp dòngp { font-family: Catamaran; font-size: 100px; line-height: 200px; }
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ả
p { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo }
.c { font-family: Catamaran }
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ếnGiá 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ị emBắ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Đ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ó
Đó 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ếnNhì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ốngMộ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
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
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òngp { 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 dungp { font-size: 100px } .a { font-family: Helvetica } .b { font-family: Gruppo } .c { font-family: Catamaran }
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ênCuố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ó íchCSS 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à 100pxp {
/* 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];
}
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 dungp {
…
--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 }
0Bâ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]