Thuộc tính initial-letter CSS sẽ giúp bạn dễ dàng thực hiện việc này hơn.
Hỗ trợ trình duyệt
Bạn có thể thử initial-letter ở đâu? Tính năng này có trong Safari và từ Chrome 110. Trong Safari, thuộc tính này cần có tiền tố -webkit-. Có một vấn đề chưa được giải quyết để triển khai tính năng này trong Firefox.
Kiểm thử khả năng hỗ trợ initial-letter bằng:
@supports (initial-letter: 1 1) { /* Your supported styles */ }
Giải pháp hiện tại
Bạn có thể tạo kiểu chữ cái đầu tiên lồng ghép trong CSS như thế nào?
Phần tử giả ::first-letter giúp chúng ta đi được một phần đường.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
}
Tuy nhiên, bạn có thể cần phải sử dụng các thuộc tính như "float" trong khi tính toán kích thước cho chữ cái đầu tiên đó.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
float: left;
line-height: 1;
margin-right: 0.25rem;
}
Việc giới thiệu các đơn vị CSS mới như lh có thể giúp giảm bớt một số vấn đề này. Tuy nhiên, các phương thức này cũng có giới hạn hỗ trợ (lh hiện chỉ được hỗ trợ trong Chrome).
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 3lh;
float: left;
line-height: 1;
margin-right: 0.1lh;
}
Giới thiệu initial-letter
Thuộc tính initial-letter giúp bạn kiểm soát kiểu chữ cái đầu tiên này một cách chi tiết hơn. Hàm này nhận hai giá trị được phân tách bằng dấu cách:
p::first-letter {
initial-letter: 3.5 3;
}
- Đối số đầu tiên xác định kích thước của thư và số dòng mà thư sẽ chiếm. Thư sẽ được điều chỉnh theo tỷ lệ trong khi vẫn giữ nguyên tỷ lệ khung hình. Bạn không thể sử dụng giá trị âm nhưng có thể sử dụng giá trị thập phân.
- Đối số thứ hai xác định bồn lưu trữ thư. Bạn có thể coi đây là độ dời cho vị trí của chữ cái. Giá trị thứ hai là không bắt buộc và không được âm. Nếu không có, thì giá trị cho kích thước chữ cái sẽ được làm tròn xuống số nguyên gần nhất. Điều này tương đương với việc sử dụng từ khoá "drop". Vùng chứa cũng chấp nhận một giá trị từ khoá khác là "raise", tương đương với vùng chứa là 1.
Hãy xem bản minh hoạ này để biết bạn có thể thay đổi các giá trị như thế nào để xem ảnh hưởng của các giá trị đó đến kiểu chữ cái đầu tiên.
Kết hợp với ::first-line, bạn có thể có nội dung như sau
p::first-line {
font-variant: small-caps;
font-weight: bold;
font-size: 1.25rem;
}
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
text-shadow: 0.25rem 0.25rem #be4bdb;
}
Hoặc có thể, hãy đặt tên là border. Lưu ý cách ví dụ sau sử dụng từ khoá "drop" (bỏ) sẽ là mặc định nếu bị bỏ qua và tương đương với 3:
css
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 drop;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
border: 0.25rem dashed #be4bdb;
padding: 0.5rem;
border-radius: 5px;
}
Có thể thêm background hoặc một số box-shadow:
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: var(--surface-1);
background: #be4bdb;
padding: 0.5rem;
border-radius: 5px;
box-shadow: 0.5rem 0.5rem 0 #3b5bdb;
}
Hoặc cắt nền vào văn bản:
p::first-letter {
background: linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: transparent;
-webkit-background-clip: text;
padding: 0.5rem;
}
Bạn có rất nhiều lựa chọn!
Vậy là bạn đã có thể kiểm soát kiểu chữ cái đầu tiên lồng ghép với initial-letter! Bạn có thêm chữ cái đầu tiên lớn vào kiểu chữ không? Bạn có thể tạo kiểu cho các thành phần này như thế nào? Nhớ báo cho chúng tôi nhé!