Thuộc tính CSS initial-letter sẽ giúp mọi thứ trở nên dễ dàng hơn 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, tài sản cần có tiền tố -webkit-. Có một vấn đề chưa giải quyết xong là việc 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
Bạn có thể tạo kiểu cho phần giới hạn đầu ra trong CSS hiện nay như thế nào?
Phần tử giả ::first-letter giúp chúng ta thực hiện một phần công việc.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
}
Nhưng sau đó, có thể bạn cần phải tiếp cận 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 ra mắt các đơn vị CSS mới như lh có thể giúp giảm bớt phần nào vấ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 tốt hơn kiểu giới thiệu này. Hàm này cầ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. Chữ cái này sẽ phóng to trong khi vẫn giữ nguyên tỷ lệ khung hình. Bạn không được 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. Đâ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ó giá trị này, hàm này sẽ giả định giá trị kích thước chữ cái được căn chỉnh 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, "raise" (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 phương thức này với ::first-line để có thành phần 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 bạn có thể dùng 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 khả năng!
Vậy là xong, bạn có thể kiểm soát tốt hơn kiểu mũ thả của mình bằng initial-letter! Bạn có muốn thêm chữ hoa toàn bộ vào kiểu chữ không? Bạn sẽ tạo kiểu cho chúng như thế nào? Nhớ báo cho chúng tôi nhé!