Drop cap là chữ cái đầu tiên trong một khối văn bản. Chữ viết hoa thường được sử dụng trong đoạn dẫn đầu của tài liệu, chẳng hạn như đoạn này bạn đang đọc ngay bây giờ. Các chữ hoa đầu được tạo kiểu khác với phần còn lại của văn bản để làm cho chúng nổi bật. Mũ lưỡi trai là một công cụ đánh dấu trực quan mạnh mẽ mà người đánh máy và thiết kế hình ảnh sử dụng để thu hút sự chú ý của mọi người vào chính xác nơi họ muốn.
Không có một cách nào để thiết kế nắp rơi. Phương pháp phổ biến nhất để sử dụng chữ cái đầu tiên là sử dụng cùng một phông chữ / kiểu chữ với phần còn lại của văn bản nội dung của bạn, nhưng làm cho kích thước phông chữ trên chữ cái đầu tiên đó lớn hơn đáng kể, đôi khi đậm hơn.
Tôi đã sử dụng mã sau để lấy kiểu cụ thể trên drop cap được sử dụng trong đoạn dẫn đầu của bài viết này:
.dropcap {
float: left;
font-size: 6em;
line-height: 0.60;
margin: 0;
margin-left: -0.04em;
padding: .09em .04em 0em 0em;
}
Để sử dụng nó trong một đoạn văn, chỉ cần đặt chữ cái đầu tiên của từ đầu tiên trong đoạn văn của bạn trong một <span và cung cấp cho nó một thuộc tính lớp của dropcap , như thế này:
<p><span class="dropcap">D</span>rop cap is the first letter in a text block...
</p>Hãy lưu ý rằng cách tạo kiểu mũ thả của bạn bằng CSS cho của bạn tài liệu cụ thể, phụ thuộc hoàn toàn về cấu trúc giải phẫu kiểu chữ bạn đã chọn, kích thước phông chữ, chiều cao dòng (hàng đầu) và các yếu tố khác. Không có một bộ quy tắc CSS nào đáp ứng mọi nhu cầu của bạn, vì vậy bạn sẽ phải nỗ lực để đạt được kết quả tốt.
Bạn có thể sử dụng CSS ở trên làm mẫu / điểm bắt đầu, sau đó tăng / giảm font-size thuộc tính drop cap của bạn để làm cho nó phù hợp với đoạn văn của bạn. Nếu bạn vẫn không thể căn chỉnh nắp thả của mình theo ý muốn, hãy thử điều chỉnh line-height giá trị tài sản tăng hoặc giảm nhẹ. Cuối cùng, bạn có thể cần chơi với margin-top để di chuyển nhẹ giới hạn thả của bạn lên hoặc xuống.
Kiểu mũ thả
Kiểu dáng cụ thể mà tôi đã chọn cho chiếc mũ lưỡi trai của mình chỉ là một trong số rất nhiều kiểu dáng. Không có quy tắc nào mà nắp thả phải căn đều từ trên xuống dưới với phần còn lại của văn bản của đoạn văn. Một số nhà thiết kế sẽ nâng giới hạn thả lên một chút so với phần tăng dần của dòng đầu tiên - những nhà thiết kế khác sẽ tăng nó đáng kể. Một số sẽ làm ngược lại và kéo nắp thả sâu vào khối văn bản, tạo ra nhiều khoảng trắng ở trên cùng và bên trái của nó.
Đôi khi các chữ viết hoa sử dụng một văn bản và / hoặc màu nền khác.
Mũ có màu văn bản khác nhau
Lorem ipsum, hoặc lipsum như đôi khi được biết đến, là văn bản giả được sử dụng trong thiết kế in ấn, đồ họa hoặc thiết kế web. Đoạn văn được cho là của một người thợ sắp chữ không rõ ở thế kỷ 15, người được cho là đã xáo trộn các phần của cuốn sách De Finibus Bonorum et Malorum của Cicero để sử dụng trong một cuốn sách mẫu.
Mũ có màu nền khác
Lorem ipsum, hoặc lipsum như đôi khi được biết đến, là văn bản giả được sử dụng trong thiết kế in ấn, đồ họa hoặc thiết kế web. Đoạn văn được cho là của một người thợ sắp chữ không rõ ở thế kỷ 15, người được cho là đã xáo trộn các phần của cuốn sách De Finibus Bonorum et Malorum của Cicero để sử dụng trong một cuốn sách mẫu.
Hai ví dụ trên sử dụng CSS giống như lớp drop cap mà tôi đã cung cấp trước đó, ngoại trừ việc chúng sử dụng màu / background-color khác. Tôi cũng đã thêm một chút padding-bottom và margin-right vào ví dụ thứ hai thành nudge nó ở đúng vị trí.
-
Drop cap chỉ là một trong nhiều công cụ tạo điểm nhấn cho kiểu chữ, nhưng nó là một trong những công cụ thu hút sự chú ý nhất - vì vậy hãy sử dụng nó một cách có chừng mực.