Thuộc tính CSS initial-letter sẽ giúp mọi việc trở nên dễ dàng hơn nhiều.
Hỗ trợ trình duyệt
Bạn có thể thử initial-letter ở đâu? Tính năng này có trên Safari và Chrome 110. Trong Safari, thuộc tính này cần có tiền tố -webkit-. Có vấn đề chưa được giải quyết để triển khai 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
Hiện tại, bạn có thể tạo kiểu cho giới hạn thả xuống trong CSS như thế nào?
Phần tử giả ::first-letter giúp chúng ta hiểu được một phần.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
}
Tuy nhiên, sau đó bạn có thể cần phải tiếp cận các thuộc tính như "float" trong khi tính 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 ra mắt các đơn vị CSS mới như lh có thể giúp giảm bớt phần nào khó khăn này. Tuy nhiên, những tính năng này cũng được hỗ trợ hạn chế (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 chặt chẽ hơn việc tạo kiểu giới hạn thả 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 chữ sẽ chiếm. Chữ cái sẽ mở rộng 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ể dùng giá trị thập phân.
- Đối số thứ hai định nghĩa bồn lưu trữ thư. Đây có thể được coi là phần bù trừ cho vị trí của chữ cái. Giá trị thứ hai là không bắt buộc và không được là số âm. Nếu không có, biến này sẽ giả định giá trị cho cỡ chữ dạng sàn thành 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à "Raise" (tăng), tương đương với việc bồn lưu trữ dữ liệu là 1.
Xem bản minh hoạ này, nơi bạn có thể thay đổi các giá trị để biết nó ảnh hưởng như thế nào đến việc tạo kiểu giới hạn thả.
Kết hợp nó với ::first-line và bạn sẽ có thành quả như thế này
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ể cung cấp cho nó một border. Hãy lưu ý cách ví dụ sau sử dụng từ khoá "drop" (bỏ qua), từ khoá này sẽ được 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;
}
Bạn có thể thêm một 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 theo 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 cơ hội!
Vậy là bạn đã có quyền kiểm soát tốt hơn đối với kiểu mũ đầu kéo của mình bằng initial-letter! Bạn có thêm chữ hoa thả vào kiểu chữ không? Bạn sẽ tạo kiểu cho những video này như thế nào? Nhớ báo cho chúng tôi nhé!