Thuộc tính initial-letter CSS sẽ giúp bạn dễ dàng hơn rất nhiều.
Hỗ trợ trình duyệt
Bạn có thể thử initial-letter ở đâu? Bạn có thể sử dụng công cụ này trên Safari và 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 với:
@supports (initial-letter: 1 1) { /* Your supported styles */ }
Giải pháp hiện tại
Hôm nay, 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 chữ cái đầu tiên
Thuộc tính initial-letter cho phép bạn kiểm soát tốt hơn kiểu giới thiệu này. 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 chữ cái và số dòng mà chữ cái 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ữ chữ cái. 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". Bồn lưu trữ dữ liệu cũng chấp nhận một giá trị từ khoá khác là "rise" (tăng lên), tương đương với giá trị bồn lưu trữ dữ liệu là 1.
Hãy xem bản minh hoạ này để biết cách thay đổi các giá trị ảnh hưởng đến việc định kiểu giới thiệu.
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" là từ khoá 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é!